How to bind the object with dynamic key in ngModel

Ionic Framework ionic-v3
1 
 <div *ngFor="let item of createShop(countShop);let i=index;">
          <div id="shops{{i+1}}">

            <ion-buttons *ngIf="i+1" end>
              <button ion-button clear icon-only (click)="removeShop($event,i)">
                <ion-icon name="remove"></ion-icon>
              </button>
            </ion-buttons>

            <ion-item>  <!--   -->
              <ion-input type="text" placeholder="Mobile" [(ngModel)]="nomineeFields.'mobile'+i"></ion-input>
            </ion-item>
            <p text-center no-margin>OR</p>
            <ion-item>
              <ion-input type="email" placeholder="Email" [(ngModel)]="'nomineeFields.'email'+i"></ion-input>
            </ion-item>
          </div>
        </div>

export class BusinessRegistrationPage {

  nomineeFields = {}

  constructor(){}

}

I’m getting error bind like that. plz, help!! Thanks in advanced

2 
 //HTML
<div *ngFor="let item of createShop(countShop);let i=index;">
          <div id="shops{{i+1}}">

            <ion-buttons *ngIf="i+1" end>
              <button ion-button clear icon-only (click)="removeShop($event,i)">
                <ion-icon name="remove"></ion-icon>
              </button>
            </ion-buttons>

            <ion-item>  <!--   -->
              <ion-input type="text" placeholder="Mobile" [(ngModel)]="nomineeFieldsMobile[i]" name="nomineeFieldsMobile[{{i}}]"></ion-input>
            </ion-item>
            <p text-center no-margin>OR</p>
            <ion-item>
              <ion-input type="email" placeholder="Email" [(ngModel)]="'nomineeFieldsEmail[i]" name="nomineeFieldsEmail[{{i}}]"></ion-input>
            </ion-item>
          </div>
        </div>

//TS

export class BusinessRegistrationPage {

  nomineeFieldsMobile = [];
  nomineeFieldsEmail = [];
  constructor(){}

}
1 Like
3

Thank you @Rupnesh it’s working. In above code it is mandatory to write the name="" ?

4

yes when we use ngModel, name attribute is required.