setValue 与 FormGroups 数组一起使用答案

【问题标题】：setValue usage with an array of FormGroupssetValue 与 FormGroups 数组一起使用
【发布时间】：2019-07-27 02:08:11
【问题描述】：

向我的表单添加 FormGroups 数组后，我无法在 FormGroup 中调用 setValue

这是我尝试过的：

this.formGroup.controls.formArray.get('input').setValue('test');

和

this.formGroup.get('formArray').get('input').setValue('test');

哪个抛出：

Cannot read property 'setValue' of null

TS：

    get formArray(): AbstractControl | null { return this.formGroup.get('formArray'); }

    this.formGroup = this.fb.group({
        formArray: this.fb.array([

            this.fb.group({

                input: [null, [Validators.required]]
            }),

            this.fb.group({

                anotherInput: [null, [Validators.required]]
            }),
        ])
    });

我做错了什么？

【问题讨论】：

只是一个普通的旧 JavaScript 数组，FormArray 使用数字索引引用其元素。在您的代码中，您有一个大小为 1 的 FormArray，这意味着您需要获取 FormArray 的第 0 个元素，然后对其进行处理。您的代码缺少的是它跳过了取出 FormArray 的第 0 个元素。

标签： angular angular-reactive-forms formarray formgroups

【解决方案1】：

表单数组的控件是一个 AbstractControls 数组，在这种情况下，您在该数组中有组，因此您需要将其作为一个访问：

this.formGroup.get('formArray').get('0').get('input').setValue('test');

在你想要的组对应的表单数组的索引处运行get，然后你可以访问该数组的组上的控件。

您可能还想更改您的吸气剂：

get formArray(): FormArray { return this.formGroup.get('formArray') as FormArray; }

【讨论】：

感谢您的快速回答，但 get() 不接受数字
我的错误，更新的答案，只需要字符串，我的索引错误
使用您刚刚发布的这个 getter 会有什么改进？
它将它声明为 FormArray 而不是 AbstractControl 并且您知道在这种情况下它不为空。所以你总是有正确的打字。 FormArray 具有 AbstractControl 没有的某些方法，因此如果您尝试使用它们，打字稿不会抱怨。