Angular Nested FormArray

Question

I'm trying to create a dynamic form with nested formArray using the following method but I'm getting this error "Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name."

I not sure where i did wrong, could someone advise me on this?

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

There is a typing mistake in your code, an extra square bracket is added

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

change it to

<div [formGroupName]="j">

Answer 2

错字修复-

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