如何在嵌套响应式表单中使用setControl与get方法

我来帮你搞定这个嵌套响应式表单的操作问题～你遇到的核心问题是：setControl方法只能操作当前FormGroup的直接子控件，而不能像get那样直接用点路径跨层级调用。下面分两种操作场景详细说明：

1. 获取嵌套的personDocument控件 #

对于获取操作，你尝试的点路径写法其实是有效的！Angular的get方法支持通过点分隔的路径来定位嵌套控件，当然你也可以逐层获取，两种方式都可行：

// 方式1：直接使用点路径（推荐，更简洁）
const personDocumentArray = this.formulario.get('person.personDocument') as FormArray;

// 方式2：逐层获取父组再定位子控件
const personGroup = this.formulario.get('person') as FormGroup;
const personDocumentArray = personGroup.get('personDocument') as FormArray;

注意要把获取到的控件断言为FormArray，这样才能调用数组相关的方法（比如push、removeAt）。

2. 设置嵌套的personDocument控件 #

setControl方法的作用是替换当前FormGroup下的一个直接子控件，所以不能直接在顶层的formulario上用person.personDocument作为参数——因为personDocument不是formulario的直接子控件，而是person这个子组的控件。正确的做法是先获取到person这个FormGroup，再在它上面调用setControl：

// 1. 先获取嵌套的person组
const personGroup = this.formulario.get('person') as FormGroup;

// 2. 在person组上设置personDocument控件（something需要是一个FormArray实例）
personGroup.setControl('personDocument', something);

举个实际的例子，如果你想把personDocument设置为一个包含新控件的数组，可以这样写：

const newDocumentArray = this.formBuilder.array([
  this.formBuilder.group({
    idDocument: [''],
    documentNumber: ['', Validators.required]
  })
]);

personGroup.setControl('personDocument', newDocumentArray);

额外提示：操作FormArray的常用方法 #

如果只是想给personDocument数组添加/移除元素，不需要用setControl，直接调用FormArray的内置方法更高效：

// 添加新的文档控件
personDocumentArray.push(this.formBuilder.group({
  idDocument: [''],
  documentNumber: ['']
}));

// 移除指定索引的文档控件
personDocumentArray.removeAt(0);

内容的提问来源于stack exchange，提问作者Murilo Góes de Almeida