getting controls of a doubly nested form array

Question

I have a working code. But Typescript complains.

I have a two form arrays nested (educationItem nested inside education). I can create a getter for accessing FormArray controls for the first loop. But TypeScript does not complain about this array.

get controls(){
return (this.educationForm.get('education') as FormArray).controls
}

Typescript complains about the second array, which is nested inside the first one. TypeScript is not recognizing the educationItem variable as a FormArray.

The getter functions don't take arguments, and I am not sure (1) how to typecast it in the template itself, or (2) write a getter with educationItem as argument (may be a setter)

Code snippet is following

            <div *ngFor="let educationItem of education.controls; index as i">
              <ng-container [formGroupName]="i">
                <ng-container>
                  <ion-button type="button" (click)="addRole(educationItem)">Add Role</ion-button>
                  <div formArrayName="description">
                    <div
                      class="players"
                      *ngFor="let role of educationItem.get('description').controls; let roleIndex = index"
                      [formGroupName]="roleIndex"
                    >
                      <ion-item>
                        <ion-label position="floating">Role title</ion-label>
                        <ion-input formControlName="title"></ion-input>
                      </ion-item>
                    </div>
                  </div>
                </ng-container>


              </ng-container>
            </div>

Eliseo · Accepted Answer · 2020-04-14 15:56:28Z

1

you can not use a getter, but you can use a function. I can not imagine your json. If I imagine some like:

educationForm={
      education:[
      {
       description:[
         {roleIndex:1,...rest of properties},
         {roleIndex:2,...rest of properties},
        ],
       ...rest of properties
      },
      {
       description:[
          {roleIndex:1,...rest of properties},
          {roleIndex:2,...rest of properties},
        ],
        ...rest of properties
       }
       ],
       ...rest of properties
}


getDescription(index:number){
 const group=(this.educationForm.get('education') as FormArray).at(index)
 return (group.get('description') as FormArray)
}

answered Apr 14, 2020 at 15:56

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Comments

Chellappan வ · Accepted Answer · 2020-04-14 15:54:34Z

Use $any() function which disable type checking in template.

Try this:

         <div *ngFor="let educationItem of education.controls; index as i">
              <ng-container [formGroupName]="i">
                <ng-container>
                  <ion-button type="button" (click)="addRole(educationItem)">Add Role</ion-button>
                  <div formArrayName="description">
                    <div
                      class="players"
                      *ngFor="let role of $any(educationItem).get('description').controls; let roleIndex = index"
                      [formGroupName]="roleIndex"
                    >
                      <ion-item>
                        <ion-label position="floating">Role title</ion-label>
                        <ion-input formControlName="title"></ion-input>
                      </ion-item>
                    </div>
                  </div>
                </ng-container>
              </ng-container>
            </div>

Collectives™ on Stack Overflow

getting controls of a doubly nested form array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related