在嵌套的表单组名称中使用父表单组的控件

Question

我正在创建一个表单，我在表单组中使用 formgroupname。

Html：

<form [formGroup]="parentForm">
  <div formGroupName="childGroup">
    <input type="text" formControlName="childControl1">
    <input type="text" formControlName="parentControl1">
    <input type="text" formControlName="childControl2">
  </div>
</form>

TS代码

this.parentForm = this.formBuilder.group({
  parentControl1: new FormControl(),
  childGroup: this.formBuilder.group({
  childControl1: new FormControl(),
  childControl2: new FormControl(),
 })
})

我收到以下错误。

错误：找不到带有路径的控件：'childGroup -> parentControl1'

注意：我无法更改 html 结构。 需要一个解决方法我可以实现这个吗

Answer 1

“parentControl”不属于 ChildGroup

1. 解决方法是使用吸气剂

   get parentControl1():FormControl { return this.parentForm.get('parentControl1') as FormControl }

   并使用[formControl]

    <div formGroupName="childGroup"> <input type="text" formControlName="childControl1"> <input type="text" [formControl]="parentControl1"> <input type="text" formControlName="childControl2"> </div>

2. 另一种解决方法是使用一些类似

   <div formGroupName="childGroup"> <input type="text" formControlName="childControl1"> <input type="text" [ngModel]="this.parentForm.get('parentControl1').value" (ngModelChange)="this.parentForm.get('parentControl1').setValue($event)" [ngModelOptions]="{standalone:true}"> <input type="text" formControlName="childControl2"> </div>