CODEWITHSUNDEEP
angular
Haha
Haha

Reputation: 146

Angular 2 way binding why is this not working?

Why is this not working? I want to change the value of second input into value of first input + 100. But in the array I just want to keep the value of first input. Is there any way to make this work?

  <div *ngFor="let item of cart" class="item">
      <h3>{{ item.side }}</h3>
      <div class="rate">{{ item.odds }}</div>
      <div class="mat">
        {{ "match: " + item.teams.teama + " Vs " + item.teams.teamb }}
      </div>

      <div class="inp">
        <input type="number" placeholder="Risk" [(ngModel)]="item.value" />
        <input type="number" placeholder="Win" [(ngModel)]="{{item.value+100}}" />
        <p>{{ item.value }}</p>
      </div>
    </div>

Upvotes: 0

Views: 44

Answers (2)

jornathan
jornathan

Reputation: 856

In your case,
If you don't care about second value is changed or not by user's input.
Here is what you need.

<input type="number" placeholder="Risk" [(ngModel)]="item.value" />     //need two way binding to catch value is changed.
<input type="number" placeholder="Win" [ngModel]="item.value+100" />    //no need.

Of course, @Adrian Brand is right.
But my answer is slightly different, he's answer is implement totally two way binding with two value.

Here is demo for you.

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21638

You can't two way bind to an expression

<input type="number" placeholder="Risk" [(ngModel)]="item.value" (change)="item.value2 = item.value + 100" />
<input type="number" placeholder="Win" [(ngModel)]="item.value2" (change)="item.value = item.value2 - 100" />

Upvotes: 3

Related Questions