访问嵌套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')

但是它给了erro那个ERROR TypeError: "this.orderForm.metadataFormGroup is undefined"

请帮帮忙

Answer 1

试着用get方法这样做

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

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

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

然后，您可以像这样设置值

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

Answer 2

您需要通过controls所以this.orderForm.controls['metadataFormGroup']...访问嵌套组。然而，一个更清洁的解决方案(我认为)是：

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

Answer 3

可以通过以下方式设置metadataFormGroup的值

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

您可以通过以下方法获得metadataFormGroup的值

this.orderForm.value.metadataFormGroup