Question

我在mat-form-field上遇到hasError问题。这是我的代码

   <mat-form-field class="mat-form-field-design">
  <mat-label>{{
    'SETTINGS.NOTIFICATION.DAYS_SEND_LABEL' | translate
    }}</mat-label>
  <mat-select formControlName="daysSend" multiple required>
    <mat-option *ngFor="let currentDays of days" [value]="currentDays">
      {{'COMMON.DAYS.' + currentDays | translate}}
    </mat-option>
  </mat-select>
  <mat-error  *ngIf="hasError(form?.get('hourSend'), 'hoursSend', 'required')">
    {{ 'COMMON.ERRORS.DAYS_REQUIRED' | translate }}
  </mat-error>
</mat-form-field>

使用该代码，该字段下方的消息不会显示，但使用该代码，则有效

<mat-form-field class="mat-form-field-design">
  <mat-label>{{
    'SETTINGS.NOTIFICATION.DAYS_SEND_LABEL' | translate
    }}</mat-label>
  <mat-select formControlName="daysSend" multiple required>
    <mat-option *ngFor="let currentDays of days" [value]="currentDays">
      {{'COMMON.DAYS.' + currentDays | translate}}
    </mat-option>
  </mat-select>
  <mat-error  *ngIf="form.get('daysSend').errors && form.get('daysSend').touched">
    {{ 'COMMON.ERRORS.DAYS_REQUIRED' | translate }}
  </mat-error>
</mat-form-field>

如果有人有相同的问题并解决，请告诉我您的解决方案。这是我的hasError方法，只调用hasError本机方法。

public hasError(form: AbstractControl, fc: string, validator: string) {
if (!form || !fc || !validator || !form.get(fc)) {
  return false;
}
return form.get(fc).hasError(validator);

}

（我指定了mat-form-field而不使用mat-select都可以正常工作）示例=>

mat-form-field class="art-form-field-full-width">
        <mat-label>{{'SETTINGS.MAIN.APPEARANCE.DASHBOARD_QUOTE_LABEL' | translate}}</mat-label>
        <input matInput
               [id]="'appearance-dashboard-band-quote' + lang.value"
               [placeholder]="'SETTINGS.MAIN.APPEARANCE.DASHBOARD_QUOTE_PLACEHOLDER' | translate"
               formControlName="dashboardBandQuote"
               required/>
        <mat-error *ngIf="hasError(form?.get(lang.value), 'dashboardBandQuote', 'required')">{{
          'COMMON.ERRORS.REQUIRED' | translate
          }}</mat-error>
      </mat-form-field>

谢谢！

Answer 1

代替：

<mat-error  *ngIf="hasError(form?.get('hourSend'), 'hoursSend', 'required')">
  {{ 'COMMON.ERRORS.DAYS_REQUIRED' | translate }}
</mat-error>

您是否要使用以下内容（请注意hasError的第一个参数）？

<mat-error  *ngIf="hasError(form, 'hoursSend', 'required')">
  {{ 'COMMON.ERRORS.DAYS_REQUIRED' | translate }}
</mat-error>

Angular => hasError在带有mat选择的mat-form-field中不显示错误

1 个答案: