CODEWITHSUNDEEP
angulartypescript
mozpider
mozpider

Reputation: 364

getting controls of a doubly nested form array

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>

Upvotes: 0

Views: 905

Answers (2)

Eliseo
Eliseo

Reputation: 57929

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)
}

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27303

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>

Upvotes: 1

Related Questions