CODEWITHSUNDEEP
angular
Ahelp
Ahelp

Reputation: 313

Nested Model - Angular 2

I have a scenario, where persons can have multiple address. Showing address type in dropdown, when select address type full address is shown on text area.

<div *ngFor="let person of persons">

  <select [ngModel]="selectedAddress" (ngModelChange)="selectedAddress = $event">
     <option *ngFor="let address of person.addresses" [ngValue]="address">
         {{address.type}}
     </option>
  </select>

   <textarea [(ngModel)]="selectedAddress.address"></textarea>

</div>

Each person is displayed in each div block. when selecting drop down value on one block populates the text area in other blocks also.

When selecting drop down on one block should populate text area only inside the block. How to handle this scenario

Upvotes: 1

Views: 200

Answers (1)

Lloren&#231; Pujol Ferriol
Lloren&#231; Pujol Ferriol

Reputation: 2629

You have to handle it with an array of selected address'es. This would be like so - where selectedAddress is an array:

<div *ngFor="let person of persons; let i = index">
  <select [ngModel]="selectedAddress[i]" (ngModelChange)="selectedAddress[i] = $event">
    <option *ngFor="let address of person.addresses" [ngValue]="address">
        {{address.type}}
    </option>
  </select>
  <textarea [(ngModel)]="selectedAddress[i].address"></textarea>
</div>

Upvotes: 1

Related Questions