访问 *ngFor 内部的表单组控件答案

【问题标题】：Access form group control inside *ngFor访问 *ngFor 内部的表单组控件
【发布时间】：2020-05-27 19:51:31
【问题描述】：

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

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

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

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

【问题讨论】：

你能添加更多的模板代码和类吗？
你的意思是parts是一个formArray吗？？
@AkhilNaidu 这是一个在 TS 文件中定义的数组。猜formArray就是你的称呼。 :)
对不起，请您发布零件数组的结构或声明（ts代码）

标签： angular angular-material ngfor mat-input mat-error

【解决方案1】：

我认为问题与您声明输入的方式有关。您对所有这些都使用相同的 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>

【讨论】：

我无法绑定到 '*ngIf'，因为它不是 'mat-error' 的已知属性。
该错误是因为 mat-error 组件未在其模块声明中导入 CommonModule。尝试将 *ngIf 放在围绕 mat-error 而不是 mat-error 组件的 ng-container 中
相同结果：“无法绑定到 '*ngIf'，因为它不是 'ng-container' 的已知属性”
然后将 CommonModule 添加到您的模块中，因为它是您的应用程序缺少的地方

【解决方案2】：

据我了解，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)
}

【讨论】：

@bigb055 我忘了提this.parts。我更新了我的答案。我希望 this.parts 是一个表单数组。对吗？
如果parts是一个formArray然后试试return (parts.controls[index] as FormGroup)