同时显示两个垫子错误答案

【问题标题】：Two mat-errors are displaying at same time同时显示两个垫子错误
【发布时间】：2021-05-15 01:07:40
【问题描述】：

这些是组件中密码验证的错误（set-pass.component.html）

   <mat-form-field >
                <input matInput  placeholder="Confirm password" [type]="hide 
                  ? 'password' : 'text'"  formControlName="confirmPassword" 
               required>

                <mat-error 
           *ngIf="setpassForm.controls.confirmPassword.hasError('required')">
                        Please confirm the password
                </mat-error>
                <mat-error 
          *ngIf="setpassForm.controls.confirmPassword.hasError('matchWith')">
                    Password entries doesn't match
                </mat-error>

   </mat-form-field>

这是.ts(set-pass.component.ts)文件

    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators, FormControl } from 
     '@angular/forms';
    import { Router } from '@angular/router';
    import { ValidatorUtil } from '../shared/validator.util';

    @Component({
     selector: 'ylb-set-pass',
     templateUrl: './set-pass.component.html',
     styleUrls: ['./set-pass.component.css']
   })
   export class SetPassComponent implements OnInit {

       setpassForm: FormGroup;


     constructor(private fb: FormBuilder,
          private router: Router) { }

     ngOnInit() {
         this.setpassForm = this.fb.group({
           'code': [null, [Validators.required,]],
           'password': [null, [Validators.required, Validators.minLength(6), 
              Validators.maxLength(15)]],
           'confirmPassword': [null, [Validators.required, 
              ValidatorUtil.matchWithValidator('password')]],
          });
        }

     onSetpass(){
     this._markAsDirty(this.setpassForm);
      }


       private _markAsDirty(group: FormGroup) {
       group.markAsDirty();
       for (let i in group.controls) {
       group.controls[i].markAsDirty();
      }
    }

  }

我的问题是，当我输入密码字段并将确认密码字段留空/触摸时，它必须只显示一个 mat-error 即（请确认密码）

但它同时显示 2 个垫子错误。

【问题讨论】：

尝试*ngIf="!setpassForm.controls.confirmPassword.hasError('required') && setpassForm.controls.confirmPassword.hasError('matchWith') " 匹配错误。
成功了，谢谢。

标签： angular angular-material angular6 angular-forms

【解决方案1】：

检查touch 上的必需验证。其他都很好。

<mat-form-field >
    <input matInput  placeholder="Confirm password" [type]="hide 
         ? 'password' : 'text'"  formControlName="confirmPassword" 
                   required>

<mat-error *ngIf="setpassForm.controls.confirmPassword.hasError('required') && setpassForm.get('confirmPassword').touched">
    Please confirm the password
 </mat-error>
<mat-error *ngIf="setpassForm.controls.confirmPassword.hasError('matchWith')">
  Password entries doesn't match
</mat-error>

</mat-form-field>

【讨论】：

【解决方案2】：

          <mat-form-field >
                <input matInput  placeholder="Confirm password" [type]="hide ? 'password' : 'text'"  formControlName="confirmPassword" required>

                <mat-error *ngIf="setpassForm.controls.confirmPassword.hasError('required')">
                        Please confirm the password
                </mat-error>
                <mat-error *ngIf="!setpassForm.controls.confirmPassword.hasError('required') && setpassForm.controls.confirmPassword.hasError('matchWith')">
                    Password entries doesn't match
                </mat-error>

            </mat-form-field>

它工作正常，我忘了给 !(not) 用于第二个 mat-error。

【讨论】：

【解决方案3】：

快速修复，您只需将以下代码添加到您的 css 文件中：

mat-error {
    display: none;
}

form mat-error:first-child {
    display: block;
}

但是，如果您在同一个组件中有多个 FormGroup，我建议您通过将 formGroup 的类名添加到 css 来指定要应用条件的表单，就像这样：

.className mat-error {
    display: none;
}

.className form mat-error:first-child {
    display: block;
}

为了避免两种形式之间的任何不一致。

【讨论】：