AppStd/DigitalData.UserManager
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Eine separate Formularvalidierungsstruktur für E-Mail-Adressen wurde erstellt.

Browse Source
This commit is contained in:
Developer 02 2024-08-01 10:35:47 +02:00
parent 672f51a99c
commit 29237edca1
2 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.html
View File

@ -21,10 +21,10 @@
<input <input
matInput placeholder="user@example.com" matInput placeholder="user@example.com"
[formControl]="email" [formControl]="email"
(blur)="updateErrorMessage()" (blur)="updateMailErrorMessage()"
required /> required />
@if (email.invalid) { @if (email.invalid) {
<mat-error>{{errorMessage()}}</mat-error> <mat-error>{{mailErrorMessage()}}</mat-error>
} }
</mat-form-field> </mat-form-field>
</div> </div>
@ -64,7 +64,12 @@
} }
</mat-form-field> </mat-form-field>
</div> </div>
<div [ngClass]="formFieldBSClass"></div> <div [ngClass]="formFieldBSClass">
<button mat-fab extended (click)="delete()">
<mat-icon>delete</mat-icon>
Löschen
</button>
</div>
</div> </div>
</div> </div>
</mat-tab> </mat-tab>

40
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.ts
View File

@ -11,6 +11,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { UserGroupDirImportComponent } from "../../user-group-dir-import/user-group-dir-import.component"; import { UserGroupDirImportComponent } from "../../user-group-dir-import/user-group-dir-import.component";
import { UserService } from '../../../services/user.service'; import { UserService } from '../../../services/user.service';
import { RefreshService } from '../../../services/refresh.service'; import { RefreshService } from '../../../services/refresh.service';
import Swal from 'sweetalert2';
@Component({ @Component({
selector: 'app-user-form', selector: 'app-user-form',
@ -25,6 +26,7 @@ export class UserFormComponent {
readonly name = new FormControl('', [Validators.required]); readonly name = new FormControl('', [Validators.required]);
readonly surname = new FormControl('', [Validators.required]); readonly surname = new FormControl('', [Validators.required]);
mailErrorMessage = signal('');
errorMessage = signal(''); errorMessage = signal('');
public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2" public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2"
@ -32,19 +34,31 @@ export class UserFormComponent {
constructor(private uService: UserService, private rService: RefreshService) { constructor(private uService: UserService, private rService: RefreshService) {
merge( merge(
this.email.statusChanges, this.email.valueChanges, this.email.statusChanges, this.email.valueChanges)
this.username.statusChanges, this.username.valueChanges,
this.name.statusChanges, this.name.valueChanges,
this.surname.statusChanges, this.surname.valueChanges)
.pipe(takeUntilDestroyed()) .pipe(takeUntilDestroyed())
.subscribe(() => this.updateErrorMessage()); .subscribe(() => this.updateMailErrorMessage());
merge(
this.username.statusChanges, this.username.valueChanges,
this.name.statusChanges, this.name.valueChanges,
this.surname.statusChanges, this.surname.valueChanges)
.pipe(takeUntilDestroyed())
.subscribe(() => this.updateErrorMessage());
}
updateMailErrorMessage() {
if (this.email.hasError('required')) {
this.mailErrorMessage.set('Wert eingeben');
} else if (this.email.hasError('email')) {
this.mailErrorMessage.set('Ungültige E-Mail');
} else {
this.mailErrorMessage.set('');
}
} }
updateErrorMessage() { updateErrorMessage() {
if (this.email.hasError('required')) { if (this.email.hasError('required')) {
this.errorMessage.set('Wert eingeben'); this.errorMessage.set('Wert eingeben');
} else if (this.email.hasError('email')) {
this.errorMessage.set('Ungültige E-Mail');
} else { } else {
this.errorMessage.set(''); this.errorMessage.set('');
} }
@ -60,8 +74,20 @@ export class UserFormComponent {
}).subscribe({ }).subscribe({
next: () => { next: () => {
this.rService.executeAll(); this.rService.executeAll();
Swal.fire({
title: "Vorgang erfolgreich!",
text: "Benutzer erfolgreich erstellt!",
icon: "success"
});
} }
}) })
} }
} }
delete(){
this.email.setValue('')
this.username.setValue('')
this.name.setValue('')
this.surname.setValue('')
}
} }