Question

我有以下情况：

  <mat-form-field>
    <input type = "text"
           title = "patientId"
           matInput
           [formControl] = "patientSearchFc"
           [placeholder] = "bookingFieldMap?.patientId.fieldLabel"
           [matAutocomplete] = "patientAutocomplete" />

    <mat-error *ngIf = "bookingFormModel.patientId.dirty && bookingFormModel.patientId.hasError('required')">
      Patient is required.
    </mat-error>

    <mat-hint *ngIf = "selectedPatient">{{'global.selected' | translate}}: 
      {{selectedPatient.someLabel}}</mat-hint>
  </mat-form-field>

  <mat-autocomplete #patientAutocomplete = "matAutocomplete">
    <mat-option *ngFor = "let patient of patients"
                [value] = "patient.someLabel"
                (onSelectionChange) = "onPatientSelection(patient)">

      {{ patient.someLabel}}
    </mat-option>
  </mat-autocomplete>

从示例中可以看出，我使用不同的控制器来显示mat-error（patientId），而不使用实际与输入连接的控制器（patientSearchFc）。原因是，我想使用不同的控制器来搜索患者，并使用不同的控制器作为从结果列表中选择的实际值。我将patientId控制器的状态更新为脏，并在用户输入内容时触摸。

  this.patientSearchFc.valueChanges
  .delay(750)
  .subscribe((patientSearchValue) => {
    this._getPatients(patientSearchValue ? patientSearchValue : undefined);
    this.bookingFormModel.patientId.markAsDrity();
    this.bookingFormModel.patientId.markAsTouched();
  });

  onPatientSelection(patient: Person) {
    this.selectedPatient = patient;
  }

  private _getPatients(patientNameSearch?) {
    this._personService.getPersons$({params: {paramBean: {firstName: 
        patientNameSearch}}})
       .onStatusOk$
       .subscribe((res) => {
         this.patients = res.getList();
       });
     }

StackBlitz：https://stackblitz.com/edit/angular-uw5mj8?file=app%2Fapp.component.html

目前没有显示错误。有什么想法吗？

Answer 1

表单字段本身需要处于错误状态才能显示任何<mat-error>内容。这意味着表单字段输入的表单控制器必须将其errorState属性评估为true。因此，您需要将两个表单控制器绑定在一起才能使其工作，或者只使用一个表单控制器。一种解决方法是使用提示代替并使用样式使其看起来像一个错误，虽然这可能无法满足应用程序要求，因为它实际上只是伪造了错误的外观 - 字段本身仍然处于非错误状态。

编辑：对stackblitz进行快速而又脏的修复是将患者ID控制器中的错误传递给患者搜索控制器值更改监听器中的患者搜索控制器：

this.patientSearchFc.valueChanges.delay(750).subscribe((value) => {
  this.patientIdFc.markAsDirty();
  this.patientIdFc.markAsTouched();
  this.patientSearchFc.setErrors(this.patientIdFc.errors);
});

Answer 2

在玩你的闪电战之后，我可以告诉你，除非表格控件本身有错误，否则你不能在材料领域显示错误。我找到了you can find here的解决方案。

您所要做的就是创建一个自定义错误，您将绑定到第二个formControl的状态，并将其设置为true。然后，您将此错误添加到mat-error标记中，它将起作用。

使用与显示的输入

2 个答案: