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
matInput placeholder="user@example.com"
[formControl]="email"
(blur)="updateErrorMessage()"
(blur)="updateMailErrorMessage()"
required />
@if (email.invalid) {
<mat-error>{{errorMessage()}}</mat-error>
<mat-error>{{mailErrorMessage()}}</mat-error>
}
</mat-form-field>
</div>
@ -64,7 +64,12 @@
}
</mat-form-field>
</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>
</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 { UserService } from '../../../services/user.service';
import { RefreshService } from '../../../services/refresh.service';
import Swal from 'sweetalert2';
@Component({
selector: 'app-user-form',
@ -25,6 +26,7 @@ export class UserFormComponent {
readonly name = new FormControl('', [Validators.required]);
readonly surname = new FormControl('', [Validators.required]);
mailErrorMessage = signal('');
errorMessage = signal('');
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) {
merge(
this.email.statusChanges, this.email.valueChanges,
this.username.statusChanges, this.username.valueChanges,
this.name.statusChanges, this.name.valueChanges,
this.surname.statusChanges, this.surname.valueChanges)
this.email.statusChanges, this.email.valueChanges)
.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() {
if (this.email.hasError('required')) {
this.errorMessage.set('Wert eingeben');
} else if (this.email.hasError('email')) {
this.errorMessage.set('Ungültige E-Mail');
} else {
this.errorMessage.set('');
}
@ -60,8 +74,20 @@ export class UserFormComponent {
}).subscribe({
next: () => {
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('')
}
}