访问嵌套的 FormBuilder Angular6

Question

我有一个简单的反应形式

this.orderForm = this._formBuilder.group({
    metadataFormGroup: this._formBuilder.group({
      data1: ['', [Validators.pattern(this.nserRegex)]],
      data2: ['', [Validators.pattern(this.crqRegex)]]
    }),

    infoFormGroup: this._formBuilder.group({
      data3: ['', [Validators.pattern(this.blcRegex)]],
      data4: new FormControl([])
    })
  });

我正在尝试访问

this.orderForm['metadataFormGroup'].controls['data1'].setValue('11111111')

但是 ERROR TypeError: "this.orderForm.metadataFormGroup is undefined"

给出了错误

请帮忙

Answer 1

您需要通过 controls 访问嵌套组，因此 this.orderForm.controls['metadataFormGroup']...。但是，更简洁的解决方案（在我看来）是：

this.orderForm.get('metadataFormGroup').get('data1').setValue('...');

Answer 2

您可以通过

设置metadataFormGroup的值

this.orderForm.setValue({
  ...this.orderForm.value,
  metadataFormGroup: {
    data1,
    data2
  }
});

您可以通过

获取metadataFormGroup的值

this.orderForm.value.metadataFormGroup

Answer 3

您可以使用setValue更新它

The setValue() method to set a new value for an individual control. The setValue() method strictly adheres to the structure of the form group and replaces the entire value for the control.

 this.orderForm.get('metadataFormGroup').get('data1').setValue('Testing');

此处 get 方法根据控件的名称或路径检索子控件。

Here is the working demo

Answer 4

用get方法试试

this.orderForm.get('metadataFormGroup').get('data1').setValue('11111111');

可以使用 get 简化上面的行属性


get  metadataFormGroup(){
  return this.orderForm.get('metadataFormGroup');
}

然后你可以这样设置值

this.metadataFormGroup.get('data1').setValue('11111111');

访问嵌套的 FormBuilder Angular6

Accessing nested FormBuilder Angular6

formbuilder

angular

angular-reactive-forms