当只出现一个错误时,两个 mat-error 都会显示。
我正在尝试使用 mat-error 制作自定义验证器。当电子邮件和确认密码的输入都具有 hasError('') 的真值时,它们都呈红色。
我认为我的 MyErrorStateMatcher 类逻辑不知何故是错误的。请帮忙!我已经尝试了一切我能做的。先感谢您!
Image
正如您在图片中看到的。当confirmPassword抛出错误时,电子邮件字段也是红色的。
我的错误状态匹配器:
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const invalidCtrl = !!(control && control.invalid && (control.dirty || control.touched));
const invalidParent = !!(control && (control.parent.hasError('notTheSame') || control.parent.hasError('emailUsed')));
return ((invalidCtrl || invalidParent));
}
}
HTML:(重点关注电子邮件和确认密码)
<form [formGroup]="signupForm" (ngSubmit)="signup(signupForm)">
<mat-form-field style="width: 100%;">
<input matInput formControlName="email" placeholder="Email address" type="email" [errorStateMatcher]="matcher" required>
<mat-error *ngIf="signupForm.controls.email.hasError('required')">Email required!</mat-error>
<mat-error *ngIf="signupForm.controls.email.hasError('email')">Email invalid!</mat-error>
<mat-error *ngIf="signupForm.hasError('emailUsed')">This email already exists!</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%;">
<input matInput formControlName="username" placeholder="User name" (blur)="signupForm.value.username != null ? isValidUsername(signupForm.value.username) : ''" required />
<mat-error>Please enter your new username!</mat-error>
<mat-error *ngIf="usernameInvalid">Username already exists!</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%;">
<input matInput formControlName="password" placeholder="New password" [type]="show ? 'text' : 'password'" required />
<mat-icon matSuffix (click)="show = !show" style="cursor: pointer;">{{show ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error>Please enter your password!</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%;">
<input matInput formControlName="confirmPassword" placeholder="Confirm password" type="password" [errorStateMatcher]="matcher" required>
<mat-error *ngIf="signupForm.controls.confirmPassword.hasError('required')">Please confirm your password!</mat-error>
<mat-error *ngIf="signupForm.hasError('notTheSame') && signupForm.value.confirmPassword != ''">Password is not the same!</mat-error>
</mat-form-field>
<br>
<button mat-raised-button class="sessionBtn" color="primary" [disabled]="signupForm.invalid">Submit!</button>
</form>
TS:
signupForm = new FormGroup({
firstName: new FormControl(),
lastName: new FormControl(),
email: new FormControl('', [
Validators.required,
Validators.email
]),
username: new FormControl(),
password: new FormControl('', [
Validators.required
]),
confirmPassword: new FormControl('', [
Validators.required
])
}, { validators: [this.checkPassword, this.checkExistingEmail] });
matcher = new MyErrorStateMatcher();
/////////Custom validator////////
checkPassword(signupForm: FormGroup) {
let password = signupForm.value.password;
let confirmPassword = signupForm.value.confirmPassword;
return password === confirmPassword ? null : { notTheSame: true };
}
checkExistingEmail(signupForm: FormGroup) {
let inputEmail = signupForm.value.email;
let dbEmail = "[email protected]";
return inputEmail !== dbEmail ? null: { emailUsed: true };
}
输入电子邮件和输入确认密码时发生错误,两者都有[errorStateMatcher]="matcher"