时间戳

首页 > 解决方案 > 访问 *ngFor 内部的表单组控件

angular - 访问 *ngFor 内部的表单组控件

问题描述

在模板文件中，我正在迭代一个元素数组，并为每个元素插入一个单独的行。

每个元素都有相同的控件集，但是每当我在其中一个输入字段中输入错误值时，所有其他输入控件上都会出现相同的错误消息。我需要它来仅验证当前输入字段。

希望我解释清楚。下面是我的模板代码：

<tr *ngFor="let element of elements">
  <td>
      <input matInput
             formControlName="elementNamePrefix"
             [required]="controls.elementNamePrefix.required"
             [placeholder]="controls.elementNamePrefix.displayName"
             [type]="controls.elementNamePrefix.type">
      <mat-error *ngIf="group.get('elementNamePrefix').hasError('maxlength')">
        Max length is XY characters!
      </mat-error>
  </td>
</tr>

标签： angularangular-materialngformat-inputmat-error

解决方案

根据我的理解parts是一个formArray. 因此，您必须根据该索引找到 formGroup 以在该特定控件中显示错误消息。

<mat-error>在容器中尝试这种情况。

<tr *ngFor="let part of parts; let i=index">
  <td>
      <input matInput
             formControlName="partNamePrefix"
             [required]="controls.partNamePrefix.required"
             [placeholder]="controls.partNamePrefix.displayName"
             [type]="controls.partNamePrefix.type">
    <mat-error *ngIf="getFormGroup(i).get('partNamePrefix').hasError('maxlength')">
        Max length is XY characters!
    </mat-error>
  </td>
</tr>

TS：

getFormGroup(index: number) {
  return (this.parts.controls.find((_controls, groupIndex) => (groupIndex === index)) as FormGroup)
}

推荐阅读