在嵌套的表單組名稱中使用父表單組的控件

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>