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 属性中，如果单击了复选框，我想添加。在阅读角度文档后，我有这个解决方案正在运行，但在 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

您收到该错误是因为FormGroupextends AbstractControl，当您使用get()它时AbstractControl，要解决此问题，您需要将其转换为FormGroup

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

见stackblitz

Answer 2

您可以将 abstractformcontrol 类型转换为 formgroup 并将其可变实例存储到变量中并执行 addcontrol 操作，如下所示：

const store: FormGroup = this.form.get('store') as FormGroup;
  store.addControl(
    'foo',
    this.fb.group({
      testingAdd: this.form.get('test').value,
    })
  );