angular - InputElement not updating with value - Stack Overflow

admin管理员组

文章数量:1355542

I am facing a strange issue. I have two similar InputElement in my HTML form. I bind/assign the values to both of them in similar way. However, when I update the binding variable during the execution of the program, one of them gets updated and visible on screen while other does not. I tried changing the bindings, using ngModel but result is the same, Can't figure out what am I doing wrong.

Below is the declaration of InputElement which gets updated correctly.

<input type="number" #reference class="height-20 counter-container" id="speedId" prevValue="0.0" value="{{speed}}">

The below declaration of Input which does not get updated properly.

<input type="number" id="presettype" prevValue="0" #preset class="preset-input" value="{{preset}}" />

I update these both in similar way in the .ts file.

this.speed = value1; this.preset = value2;

But speed gets updated and shown on UI properly, while preset field remains empty.

What could be the possible fix?

I am facing a strange issue. I have two similar InputElement in my HTML form. I bind/assign the values to both of them in similar way. However, when I update the binding variable during the execution of the program, one of them gets updated and visible on screen while other does not. I tried changing the bindings, using ngModel but result is the same, Can't figure out what am I doing wrong.

Below is the declaration of InputElement which gets updated correctly.

<input type="number" #reference class="height-20 counter-container" id="speedId" prevValue="0.0" value="{{speed}}">

The below declaration of Input which does not get updated properly.

<input type="number" id="presettype" prevValue="0" #preset class="preset-input" value="{{preset}}" />

I update these both in similar way in the .ts file.

this.speed = value1; this.preset = value2;

But speed gets updated and shown on UI properly, while preset field remains empty.

What could be the possible fix?

• angular
• typescript

Share Improve this question Follow asked Mar 31 at 10:53 Himanshu1983Himanshu1983 9166 bronze badges 1

• Try to use sqaure brackets for value attributes <input type="number" id="presettype" [prevValue]="0" #preset class="preset-input" [value]="preset" /> – Edo2610 Commented Mar 31 at 12:59

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Resolved the problem. I was using the same variable name for template variable and local variable. This was causing the above problem. Once I changed the name of my local variable, it started working.

Given that you are using Interpolation with value attribute: When you use {{ speed }} inside the value attribute, Angular will interpolate the value into the input, but it does not establish a two-way binding. This means that the input field will display the value of speed when it is initialized, but it won't update the value of speed when the user modifies the input.

I know you said you tried using ngModel but was it exactly as follows?

<input type="number" [(ngModel)]="speed" id="speedId" class="height-20 counter-container">
<input type="number" [(ngModel)]="preset" id="presettype" class="preset-input">

本文标签： angularInputElement not updating with valueStack Overflow