Question

我的角度应用程序中有两种反应形式。
我想有条件地显示<mat-error>消息。
在我的第一个表单中，我设法做到这一点没有问题，但是在第二个表单中，它仅在触摸表单控件时显示。

第一个表单应正常工作

 <!-- Location type field-->
      <div class="form-container__form__field">
        <mat-form-field class="form-input">
          <input type="text" autocomplete="on" 
          formControlName="placeType" 
          matInput 
          placeholder="*סוג המקום">
          <mat-error *ngIf="formSubmitted &&
           newPlannerForm.controls['placeType'].errors">
           חובה למלא את סוג המקום!</mat-error>
        </mat-form-field>
      </div>

仅在触摸控件时显示第二个

<mat-form-field 
class="inner-container__form__inputs__personal-info__input__field">
              <input 
              matInput 
              placeholder="*שם" maxlength="40" type="text" 
              formControlName="name" autocomplete="off">
              <mat-error 
                *ngIf="workingTimeSubmitted && 
                teamCreationForm.get('name').hasError('required')">
                יש למלא את שם איש הצוות!
              </mat-error>
    </mat-form-field>

Answer 1

这是根据the documentation设计的行为。但是可以通过实现自定义ErrorStateMatcher来覆盖它。

您可以通过以下方式实现此目标：

创建自定义ErrorStateMatcher

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

在组件代码中声明新创建类型的文件

errorStateMatcher = new InstantErrorStateMatcher();

请参阅模板中的自定义错误状态匹配器

<input matInput formControlName="yourFormControl"
    [errorStateMatcher]="errorStateMatcher">

您可以在this repository中找到完整的示例。看this component。

<mat-error>仅在触摸了从控件时显示-角度材质

1 个答案: