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>

Nithya Rajan · Accepted Answer · 2019-02-15 09:15:42Z

1

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

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

change it to

<div [formGroupName]="j">

answered Feb 15, 2019 at 9:15

Nithya Rajan

4,93422 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scholarwithfire Over a year ago

My mistake on this. Thanks for the answer

Pardeep Jain · Accepted Answer · 2019-02-15 09:17:13Z

0

Typo fix -

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

answered Feb 15, 2019 at 9:17

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Collectives™ on Stack Overflow

Angular Nested FormArray

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related