角嵌套FormArray

Question

我正在嘗試使用以下方法使用嵌套formArray創建動態表單，但出現此錯誤“無法在'Element'上執行'setAttribute'：']'不是有效的屬性名稱。”

我不確定我做錯了什么，有人可以建議我嗎？

TS：

createProductForm() {
this.productForm = this.formBuilder.group({
  variations: this.formBuilder.array([this.createVariation()])
});
}

createVariation() {
return this.formBuilder.group({
  variName: '',
  variOptions: this.formBuilder.array([this.createOptions()])
});
}

addVariation(): void {
(this.productForm.controls['variations'] as FormArray).push(this.createVariation());
}

createOptions() {
return this.formBuilder.group({
  optName: '',
  optStock: '',
  optSku: '',
  optDisPrice: '',
  optActPrice: ''
});
}

addOption(): void {
(this.productForm.controls['variOptions'] as FormArray).push(this.createOptions());
}

HTML：

<div class="card-block">
            <button type="button" class="btn btn-primary" (click)="addVariation()">Add Variation</button>
          <div class="card-text">

              <div class="clr-row" formArrayName="variations"
                *ngFor="let variation of productForm.controls['variations'].controls; let i = index;">
                <div class="card" [formGroupName]="i">
                  <div class="card-block">
                    <clr-input-container>
                      <label>Variation Name</label>
                      <input clrInput type="text" formControlName="variName"/>
                    </clr-input-container>
                    <div formArrayName="variOptions"
                      *ngFor="let option of variation.controls['variOptions'].controls; let j = index;">
                      <div [formGroupName]="j"]>
                        <clr-input-container>
                          <label>Option Name</label>
                          <input clrInput type="text" formControlName="optName"/>
                          <button type="button" class="btn btn-primary" (click)="addOption()">Add Tion</button>
                        </clr-input-container>
                      </div>
                    </div>

                    <!-- <clr-input-container>
                      <label>Variation Option</label>
                      <input clrInput type="text" formControlName="optName"/>
                    </clr-input-container> -->
                  </div>
                </div>
              </div>

            </div>
          </div>

Answer 1

您的代碼中有一個輸入錯誤，添加了一個額外的方括號

<div [formGroupName]="j"]> ，

更改為

<div [formGroupName]="j">

Answer 2

錯字修復-

<div [formGroupName]="j">  // Remove `]` from EOL