将新属性添加到 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}),
    ]),
  });
}

在商店内属性，我想在单击复选框时添加。在阅读 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

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,
    })
  );

将新属性添加到 formGroup 的最佳实践

best practice of adding a new property to a formGroup

angular

angular-forms

angular-formbuilder

将新 属性 添加到 formGroup 的最佳实践

best practice of adding a new property to a formGroup

angular

angular-forms

angular-formbuilder

将新属性添加到 formGroup 的最佳实践