Угловой вложенный FormArray

Question

Я пытаюсь создать динамическую форму с вложенным formArray, используя следующий метод, но я получаю эту ошибку «Не удалось выполнить 'setAttribute' для 'Element': ']' не является допустимым именем атрибута".

Я не уверен, где я сделал не так, может кто-нибудь посоветовать мне по этому поводу?

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">  // Remove `]` from EOL

Answer 2

В вашем коде есть ошибка ввода, добавлена ​​дополнительная квадратная скобка

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

измените ее на

<div [formGroupName]="j">