angular - 向 formGroup 添加新属性的最佳实践

Question

向 Angular formGroup 添加新对象属性的正确方法是什么？

我有这个设置:

ngOnInit() {
  this.form = this.fb.group({
    // store is the formGroupname
    store: this.fb.group({
      // branch and code are formControlName
      branch: ['asdf', Validators.required],
      code: ['asdf', Validators.required],
    }),
    selector: this.createStock({}),
    stock: this.fb.array([
      this.createStock({product_id: '1', quantity: 20}),
      this.createStock({product_id: '2', quantity: 30}),
      this.createStock({product_id: '3', quantity: 40}),
    ]),
  });
}

在 store 属性中，我想在单击复选框时添加。在阅读 Angular 文档后，我有了这个有效的解决方案，但在 vscode 上给了我红线。我想知道这是正确的方法吗？

解决方案:

onSubmitForm() {

  // adding dynamic formgroup
  if(this.form.get('checkBoxStore').value)
  this.form.get('store').addControl(
    'foo',
    this.fb.group({
      testingAdd: this.form.get('test').value,
    })
  );
}

图片:

它给了我一条错误消息，但工作正常。奇怪但还可以。

Answer 1

您收到该错误是因为 FormGroup 扩展了 AbstractControl，当您使用 get() 时，它是一种 AbstractControl 所以要解决这个问题，您需要将其转换为 FormGroup

(this.form.get('store') as FormGroup).addControl(...)

参见 stackblitz