当只有一个条件为真时,两个 mat-error 都会显示 [英] Both mat-error show when only one condition is true
问题描述
当只出现一个错误时,两个 mat-error 都会显示.
Both mat-error show when only one error appeared.
我正在尝试使用 mat-error 制作自定义验证器.当电子邮件和确认密码的输入都为 hasError('') 的真值时,它们都是红色的.
I'm trying to make custom validators with mat-error. Both input for email and confirm password are red when each of them has a true value for hasError('').
我认为我的 MyErrorStateMatcher 类逻辑不知何故是错误的.请帮忙!我已经尝试了任何我能做的.提前致谢!
I think my MyErrorStateMatcher class logic is wrong somehow. Please help! I have tried anything I could. Thank you in advance!
正如您在图像中看到的那样.当confirmPassword 抛出错误时,email 字段也是红色的.
As you can see in the image. When confirmPassword throws an error, the email field is also red.
我的 ErrorStateMatcher:
My ErrorStateMatcher:
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:(关注 email 和 confimPassword)
HTML: (focus on email and confimPassword)
<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 = "test@test.com";
return inputEmail !== dbEmail ? null: { emailUsed: true };
}
输入电子邮件和输入确认密码时出错,两者都有 [errorStateMatcher]="matcher"
Error happend with input email and input confirmPassword, both have [errorStateMatcher]="matcher"
推荐答案
创建 customErrorMatcher
Creating a customErrorMatcher
好吧,如果我们想在 input
是 valid 时在
中显示错误,我们使用自定义ErrorMatcher.
Well, if we want to show an error in a <mat-form-field>
when the input
is valid, we use a customErrorMatcher.
这是一个类
class CrossFieldErrorMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
//when we want to show the error
return true
//when we want not show the error
return false
}
}
通常我们的组件中有
errorMatcher=new CrossFieldErrorMatcher()
//and the .html
<mat-form-field>
<input matInput formControlName='verifyPassword'
[errorStateMatcher]="errorMatcher">
<mat-error *ngIf="....">
Passwords do not match!
</mat-error>
</mat-form-field>
好吧,我们稍微改变一下,在 customErrorMatcher 中添加一个构造函数
Well, we are change the things a bit, adding a constructor in our customErrorMatcher
class CrossFieldErrorMatcher implements ErrorStateMatcher {
constructor(private name:string){} //<--add a constructor
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
//when we want to show the error, but we can use "name"
return true
//when we want not show the error
return false
}
}
然后,我们的组件就变成了
Then, our component becomes
errorMatcher(name:string)
{
return new CrossFieldErrorMatcher(name);
}
//and the .html
<mat-form-field>
<input matInput formControlName='verifyPassword'
[errorStateMatcher]="errorMatcher('password')">
<mat-error *ngIf="....">
Passwords do not match!
</mat-error>
</mat-form-field>
这篇关于当只有一个条件为真时,两个 mat-error 都会显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!