如何以类型化的角度反应形式修补表单数组

Question

我正在尝试弄清楚如何以类型化反应式 Angular 形式修补表单数组。例如，patchValue 和 setValue 在我看来与 FormControl 不一致。 这是一个表格

 this.form = fb.group<IPersonForm>({
      name: new FormControl<string | null>('bob'),
      phones: new FormArray<FormGroup<IPhoneForm>>([]),
    });

我可以轻松地修补名称控制：

this.form.controls.name.patchValue('Jim', { onlySelf: true, emitEvent: false });

但是形成数组是一个挑战。假设我创建了一个替换数组

const myPhone = this.fb.group<IPhoneForm>({
      phone: new FormControl<string | null | undefined>('bob')
    });
const array = new FormArray<FormGroup<IPhoneForm>>([myPhone]);

现在，如果我尝试修补（或设置），都无法编译：

    //this.form.controls.phones.setValue(array);
    //this.form.controls.phones.setValue(array.controls);
    //this.form.controls.phones.patchValue(array);
    //this.form.controls.phones.patchValue(array.controls);

我可以使用 setControl，但该方法没有 onlySelf 选项：

this.form.setControl('phones', array, { emitEvent: false });

我觉得那里需要 onlySelf，因为如果我要替换数据并进行复杂的验证，我不希望它们在任何控件上运行，直到修补整个表单。 谢谢！

这是带有演示的 stackblitz：https://stackblitz.com/edit/angular-path-typed-array?file=src%2Fmain.ts

Answer 1

您应该将逻辑值而不是其他形式传递给补丁

this.form.controls.phones.patchValue([{phone: '123'}]);

或

this.form.patchValue({phones: [{phone: '123'}]})

也可以同时使用姓名进行一次通话

this.form.patchValue({name: 'Jim', phones: [{phone: '123'}]})

如果需要，您可以仅添加Self或emitEvent。它们都与问题无关。