如何通过Angular 8中的组件ts文件以编程方式在[formControl]上设置错误？

Question

我有一个基本上使用（使用ngModel绑定）驱动的模板。但是很少有输入（此处为mat-autocomplete）使用[formControl]绑定。我想当用户输入自由文本且未选择时在此输入上显示错误自动完成下拉菜单中的任何选项（自定义ngx-bootstrap类型）。我能够得到必填字段错误。我该如何实现？

我的模板：

<form class="form-horizontal" #addAssignmentForm="ngForm" (ngSubmit)="addAssignmentForm.form.valid && createAssignment()">
    <div class="wrapper wrapper-content myWrapper">
      <input
        type="text"
        class="form-control"
        placeholder="Select Hospital"
        #hospitalInput
        aria-label="Number"
        [formControl]="searchHospital"
        matInput
        [matAutocomplete]="hospitalAutoComplete"
        required
      />
      <mat-autocomplete #hospitalAutoComplete="matAutocomplete" [displayWith]="displayWith" showPanel="true" (optionsScroll)="onHospitalScroll()">
        <mat-option *ngFor="let option of filteredHospitals$ | async" [value]="option">
          {{ option?.name }}
        </mat-option>
      </mat-autocomplete>
      <div *ngIf="(addAssignmentForm.submitted || searchHospital.dirty) && searchHospital.invalid">
        <span *ngIf="searchHospital?.errors?.required" class="text-danger">Please select a hospital</span>
      </div>
    </div>
</form>

在组件中，我尝试过：

formData.form.controls['email'].setErrors({'incorrect': true});

但是抛出错误formData.form.controls['email']未定义

Answer 1

您可以通过在反应形式控件上设置验证器来触发错误状态，如下所示：

TS

this.form = this.formBuilder.group({
  textLimit: [countingValue, {
    validators: [Validators.required, Validators.pattern('[0-9]*'), Validators.min(1), Validators.maxLength(20)],
    updateOn: 'change'
  }]
});

HTML

<form [formGroup]="form">
  <mat-form-field>
      <input matInput
             [placeholder]="Add some numbers"
             formControlName="textLimit">
      <mat-error>Please use only numbers</mat-error>
  </mat-form-field>
</form>

Validators.required或Validators.pattern('[0-9]*')之类的验证器可确保在未满足验证器的情况下将表单的状态更改为form.valid = false;。然后，将在<mat-error>

内部触发错误分量<mat-form-field>

在您的示例中

在您的示例中，您将拥有类似的东西：

TS：

this.searchHospital = new FormControl('',[/* Validators */]);

HTML：

<mat-form-field>
    <input type="text" [formControl]="searchHospital" />
    <mat-error>Something is wrong</mat-error>
</mat-form-field>

有关响应式错误处理的更多信息，请阅读

• https://angular.io/guide/form-validation
• https://angular.io/guide/reactive-forms