一次显示一条错误消息

Question

我正在使用 FormBuilder 和 Validators 处理 Ionic 表单。错误消息都可以正常工作，但是有没有办法一次显示一个错误消息？

.html代码

<ion-item no-lines *ngIf="(Form.get('password').hasError('minlength') || 
    Form.get('password').hasError('maxlength') ||Form.get('password').hasError('required') || 
    Form.get('password').hasError('pattern')  ) && Form.get('password').touched">

      <div class="error" *ngIf="cForm.get('password').hasError('required')">
        This field cannot be empty
      </div>
      <div class="error" *ngIf="Form.get('password').hasError('minlength') || Form.get('password').hasError('maxlength')">
        Please keep your password characters between 8 to 12
      </div>
      <div class="error" *ngIf="Form.get('password').hasError('pattern')">
        Please enter alphanumeric
      </div>
</ion-item>

.ts 代码

this.Form = formBuilder.group({
      password: ['', Validators.compose([Validators.minLength(8), Validators.maxLength(12), 
        Validators.pattern('[^A-Z]*'), Validators.required])]
    });

Answer 1

<div class="error" *ngIf="Form.get('password').hasError('pattern') || Form.get('password').hasError('required') || Form.get('password').hasError('minlength') || Form.get('password').hasError('maxlength')">
      {{cForm.get('password').hasError('required') ? 'This field cannot be empty' : Form.get('password').hasError('pattern') ? 'Please keep your password characters between 8 to 12' :'Please enter alphanumeric'}}
    </div>