Angular：如何遍历嵌套在已经嵌套在不同 FormGroup 中的 FormGroup 中的 FormArray？答案

【问题标题】：Angular: how to loop through a FormArray which is nested in a FormGroup which is already nested in a different FormGroup?Angular：如何遍历嵌套在已经嵌套在不同 FormGroup 中的 FormGroup 中的 FormArray？
【发布时间】：2020-07-20 15:22:27
【问题描述】：

我使用这段代码来创建我的表单：

@Input() fetchedTask: Task;
taskForm: FormGroup;
formThresholds: FormArray;

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

我稍后使用setValue() 设置表单的值：

this.taskForm.controls["taskId"].setValue(this.fetchedTask.taskId);

我使用以下方法设置 FormArray 的值：

this.fetchedTask.configuration.thresholds.forEach((x)=>{
              this.addItem(x.value, x.name);
            })

addItem(value: number, name: string): void {
      this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
      this.formThresholds.push(this.createItem(value, name));
    }

createItem(value: number, name: string): FormGroup{
      return this._formBuilder.group({
        value: value,
        name: name
      });
    }

我真的不知道如何循环遍历我的数组值并在我的表单中显示它们，并使用填充的值。

我试过了，但没有成功：

        <div *ngFor="let threshold of taskForm.get('configuration.thresholds') let i = index;">
            <div [formGroupName]="i">
                <input formControlName="name" placeholder="Threshold name">
                <input formControlName="value" placeholder="Threshold value">
            </div>
        </div>

【问题讨论】：

试试这个taskForm['controls'].configuration.thresholds['controls']
@GouravGarg 我在尝试您的建议时收到此错误：“AbstractControl”类型上不存在属性“阈值”。
你可以试试这个吗？ taskForm['controls'].configuration['controls'].thresholds['controls'] 或者您可以简单地创建一个 get 属性，如 get formArray():FormArray{return this.taskForm.get('configuration.thresholds') as FormArray;}

标签： angular forms formbuilder formarray

【解决方案1】：

您也可以直接输入HTML如下：

*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"

或者您可以在组件中创建一个 get 属性并在 html 或 ts 文件中使用。

get formThresholds():FormArray{
    return this.taskForm.get('configuration.thresholds') as FormArray;
}

【讨论】：

taskForm['controls'].configuration['controls'].thresholds['controls']; 成功了！但现在我遇到了一组有趣的错误："Cannot find control with name: '0'"、"Cannot find control with path: '0 -> name'"、Cannot find control with path: '0 -> value'。我检查过了，我的阈值 FormArray 中有一个 FromGroup。
你能在控制台中检查taskForm['controls'].configuration['controls'].thresholds['controls'][0].get('name')的返回值吗？跨度>
我尝试在我的 div 标签中添加formArrayName="formThresholds"：<div formArrayName="formThresholds" *ngFor="let threshold of this.taskRunProfileForm['controls'].configuration['controls'].thresholds['controls']; let i = index;">，但现在我的错误消息中多了一个步骤："Cannot find control with name: 'formThresholds'"、"Cannot find control with path: 'formThresholds -> 0'"、"Cannot find control with path: 'formThresholds -> 0 -> name'"
在 formArrayName="formThresholds" 中添加这个
我做了，你之前的评论。 taskForm['controls'].configuration['controls'].thresholds['controls'][0].get('name') 的返回值如预期：value:"Duration"。有趣的是，我得到了 name 和 value 属性的空白输入，但这些输入中没有值。我尝试更改初始化表单并将数据从 NgOnChanges 绑定到 NgOnInit 的位置，结果相同。

【解决方案2】：

感谢 Gourav Garg 和我的摆弄，我想出了一个答案。

问题是我错过了一个父 div 标签，该标签引用了 formArray 所属的 formGroup - “配置”表单组。

所以对于这个表单结构：

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

get thresholds(): FormArray{
      return this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
    }

如果我想在我的页面上显示阈值的值，我需要 4 个标签。示例：

<form [formGroup]="taskForm">
    <div formGroupName="configuration">
        <div formArrayName="thresholds"
            *ngFor="let threshold of this.taskRunProfileForm['controls'].configuration['controls'].thresholds['controls']; let i = index;">
            <div [formGroupName]="i">
                {{name.value}}
                {{value.value}}
            </div>
        </div>
    </div>
</form>

【讨论】：