Question

这些是组件（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();
      }
    }

  }

我的问题是，当我在密码字段中键入并留下确认密码字段为空白/触摸时，它仅显示一个错误，即我（请确认密码）

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

Answer 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>

Answer 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>

它工作正常，我被遗忘了为第二次垫错误提供！（不是）。

Answer 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;
}

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

同时显示两个垫错误

3 个答案: