Angular 4嵌套表单更新

Question

我有以下“三级”嵌套形式： FormGroup->ArrayOfFormGroups->FormGroup

顶级（myForm）：

this.fb.group({
            name: '',
            description: '',
            questions: this.fb.array([])
        });

“问题”的嵌套表单数组元素：

this.fb.group({
            priority: ['1'],
            params: this.fb.group({parameter: ['']})
        });

'params' 的嵌套表单组元素是一个随机长度的 key:value 对象。

我正在使用以下 ngFor 来遍历元素：

<tr *ngFor="let questionConfigForm of myForm.controls.questions.controls; let i=index" [formGroupName]="i">
...
    <div *ngFor="let param of objectKeys(questionConfigForm.controls.params.controls)" formGroupName="params">
        <input type="text" [formControlName]="param">

我有以下行为： 当我更新前两个表单级别上的任何字段时，我可以立即看到相应表单控件值的变化 {{myForm.value | json}}。 但是，如果我在“params”控件之一中输入某些内容，我看不到 myForm 值的任何更改，但是如果我将对相应的“问题”表单进行任何更改，“params”控件的表单数据将被更新。

对我来说，“param”表单控件看起来像接收输入数据，但没有触发一些更新事件，我不知道如何解决这个问题，除了编写我自己的函数来响应（更改）和 patchValue形式上..

所以我的问题是如何让“参数”控件更新 myForm 而不会出现这种奇怪的行为？

更新：

initQuestionConfig() {
    return this.fb.group({
        priority: ['1'],
        params: this.fb.group({parameter: ['']}),
    });
}

addQuestionConfig() {
    const control = <FormArray>this.myForm.controls['questions'];
    const newQuestionCfg = this.initQuestionConfig();
    control.push(newQuestionCfg);
}

Answer 1

问题终于解决了。

这个问题的根源是我清理已经存在的“参数”的方式。

要从“问题”中删除所有参数，我使用了以下代码：

const control = <FormArray>this.myForm.controls['questions'];
control.controls[index]['controls'].params = this.fb.group([]);

这些故障的原因是这个新的“fb.group”实例。

现在我将一一删除参数，保留原始 formGroup 实例，它按预期工作：

const control = <FormArray>this.myForm.controls['questions'];
        const paramNames = Object.keys(control.controls[index]['controls'].params.controls);
        for (let i = 0; i < paramNames.length; i++) {
            control.controls[index]['controls'].params.removeControl(paramNames[i]);
        }

@MilanRaval 再次感谢您的光临 :)

Answer 2

试试这个：给 formArrayName 和 formGroupName 如下所示...

 <div formArrayName="testGroup">
            <div *ngFor="let test of testGroup.controls; let i=index">
                <div [formGroupName]="i">
                    <div class="well well-sm">
                        &nbsp;&nbsp;<label>
                            <input type="checkbox" formControlName="controlName" />                                
                    </div>
                </div>
            </div>
        </div>