CODEWITHSUNDEEP
angularangular-ngmodel
A.Rekik
A.Rekik

Reputation: 43

change one select , others selects are changes

I have a problem with my application. I have to write several selects by using ngValue ngModel . The problem is, when one is changed, others selects are changes to the same value - why?.

HTML:

<select placeholder="Contrat" name="contrat"  [(ngModel)]="contrat" class="form-control">

      <option [ngValue]="contrat" *ngFor="let contrat of contrats"> {{contrat.id}}</option>
    </select>

    <select placeholder="Contrat" name="contrat"  [(ngModel)]="contrat" class="form-control">

      <option [ngValue]="contrat" *ngFor="let contrat of contrats"> {{contrat.id}}</option>
    </select>

    <select placeholder="Contrat" name="contrat"  [(ngModel)]="contrat" class="form-control">

      <option [ngValue]="contrat" *ngFor="let contrat of contrats"> {{contrat.id}}</option>
    </select>

What's the solution?

Thanks a lot.

Upvotes: 1

Views: 346

Answers (2)

Sivaramakrishnan
Sivaramakrishnan

Reputation: 739

In your case you are having the same [(ngModel)] for all the three select boxes so when you choose one value from the select box it reflects the other one.

So you have to use different ngModel for the three select tags

Upvotes: 0

leurer
leurer

Reputation: 469

This happens because you are binding the same variable to every select in your [(ngModel)]

You are using two way binds so any change in one select will change the variable. Angular will detect this and update the other binds as well.

Upvotes: 3

Related Questions