角嵌套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