时间戳

首页 > 解决方案 > 解决错误后，mat-form-field 不会删除 mat-form-field-invalid 类

javascript - 解决错误后，mat-form-field 不会删除 mat-form-field-invalid 类

问题描述

我正在尝试为mat-input. 一切正常，发生错误时会显示错误，但解决错误后mat-form-field不会删除mat-form-field-invalid类 https://imgur.com/a/MSsaVop

class CrossFieldErrorMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | 
    NgForm | null): boolean {
        return control.dirty && form.invalid;
   }
}

errorMatcher = new CrossFieldErrorMatcher();
register = this.fb.group({
userName: ['', [Validators.required]],
userEmail: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, this.phoneNumberValidator]],
userPassword: ['', [Validators.required]],
passwordconfirm: ['', ],
adminName: ['', [Validators.required]],
adminPassword: ['', [Validators.required]],

}, {
  validator: this.passwordValidator
})

passwordValidator(form: FormGroup) {
    const condition = form.get('passwordconfirm').value !== 
        form.get('userPassword').value;

    return condition ? { passwordsDoNotMatch: true } : null;
}


<mat-form-field class=" my-4 ">
    <input matInput type="password" required 
           formControlName="userPassword" placeholder="Password" 
           [type]="hide ?'password' : 'text'" class="col-4" name="password">    
</mat-form-field>
<mat-form-field class=" my-4 ">
    <input matInput type="password" required 
           formControlName="passwordconfirm" placeholder="Confirm 
Password"
           [type]="hide2 ? 'password' : 'text'" class="col-4"
           [errorStateMatcher]="errorMatcher" name="conpassword">

    <mat-error *ngIf="register.hasError('passwordsDoNotMatch')">
        Passwords do not match!
    </mat-error>
</mat-form-field>

标签： javascriptangularangular-material

解决方案

问题是您CrossFieldErrorMatcher正在使用整个表单来验证密码，而您真正想要的只是查看该表单的子集。

要解决这个问题，只需为密码元素添加一个单独FormGroup的元素，这样您的表单构建将如下所示：

register = this.fb.group({
userName: ['', [Validators.required]],
userEmail: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, this.phoneNumberValidator]],
// Create a separate FormGroup here to isolate the scope
passwords: this.fb.group({
    userPassword: ['', [Validators.required]],
    passwordconfirm: [''],
}, { validator: this.passwordValidator }),
adminName: ['', [Validators.required]],
adminPassword: ['', [Validators.required]]
})

然后在您的模板中，只需将您的密码元素“包装”在 a 中，并将其div指定为新的，如下所示：FormGroupFormGroup

<div [formGroup]="register.get('passwords')"> // Assign the new FormGroup
    <mat-form-field class=" my-4 ">
        <input matInput type="password" required 
               formControlName="userPassword" placeholder="Password" 
               [type]="hide ?'password' : 'text'" class="col-4" name="password">    
    </mat-form-field>
    <mat-form-field class=" my-4 ">
        <input matInput type="password" required 
               formControlName="passwordconfirm" placeholder="Confirm Password"
               [type]="hide2 ? 'password' : 'text'" class="col-4"
               [errorStateMatcher]="errorMatcher" name="conpassword">

        <mat-error *ngIf="register.get('passwords').hasError('passwordsDoNotMatch')">
            Passwords do not match!
        </mat-error>
    </mat-form-field>
</div>

推荐阅读