-1

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

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

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

<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>
4

2 回答 2

0

根据我的理解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)
}
于 2020-02-12T09:56:10.060 回答
0

我认为问题与您声明输入的方式有关。您对所有这些都使用相同的 formControlName。而不是它尝试分配一个动态的：

<tr *ngFor="let part of parts; index as i">
  <td>
    <input matInput
         formControlName="{{part.whatever}}"
         [required]="controls.partNamePrefix.required"
         [placeholder]="controls.partNamePrefix.displayName"
         [type]="controls.partNamePrefix.type">
    <mat-error *ngIf="group.get({{part.whatever}}).hasError('maxlength')">
      Max length is XY characters!
    </mat-error>
  </td>
</tr>
于 2020-02-12T09:57:44.713 回答