Tukukkk

I have an input field where the user can enter the rate of something.

When the user enters a value, I want it to be displayed after rounding it off and then the updated value to be stored on the backing model in ts file.

Using an Angular pipe isn't good for this since a pipe in one directional and the updated value won't be reflected on the model.

So to make it bidirectional, I'm doing the following:

<input type="text" [ngModel]="model.rate" (ngModelChange)="model.rate=roundRate($event)" name="rate" />

The roundDate function looks like this

roundRate(value) {

    return Math.round(value);

}

Now when I enter values like 5.6, 7.8, 9.5 etc they're all rounded off, displayed and stored on the model to 6, 8 and 10 respectively, which is the expected behavior.

The problem starts when I enter 2.1, 3.4, 5.3 etc. In this case, the roundRate function gets called and it returns the value after rounding off. But the values shown on screen are still the old values (2.1, 3.4, 5.3)

I inspected the input element on Chrome and found that the ng-reflect-model property was getting updated to the expected values (2, 3, 5).

<input _ngcontent-c39="" name="rate" type="text" ng-reflect-name="rate" ng-reflect-model="5" class="ng-valid ng-dirty ng-touched">

Can someone please explain what is happening here and despite the ng-reflect-model property getting updated why the screen still shows the old values?

Thanks for your help!

For a cleaner implementation, just use the (change) @Output property and [(ngModel)]. The implementation of roundRate will change something like this:

import { Component } from '@angular/core';



@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {



  model = { rate: null };



  roundRate() {

    this.model.rate = Math.round(+this.model.rate);

  }

}

And in template:

<input type="text" [(ngModel)]="model.rate" (change)="roundRate()" name="rate" />

PS: This will update the value only once you blur from your input field

Here's a Sample StackBlitz for your ref.

Begin with a closer look at the ngModel directive API, you will see that ngModel is @Input binding which accepts some value as model variable. At the time of initializing ngModel control it creates FormControl implicitly.

public readonly control: FormControl = new FormControl();

The magic of updating model value happens from ngOnChanges hook, this way it sync view value with model value. If you take a closer look at ngOnChanges hook, you will find that, it validates input and apply other checks as well, afterwards it strictly checks that if value of ngModel value is really changed using isPropertyUpdated method.

ngOnChanges - ngModel directive

ngOnChanges(changes: SimpleChanges) {

    this._checkForErrors();

    if (!this._registered) this._setUpControl();

    if ('isDisabled' in changes) {

      this._updateDisabled(changes);

    }



    if (isPropertyUpdated(changes, this.viewModel)) {

      this._updateValue(this.model); // helps to update 

      this.viewModel = this.model;

    }

}



private _updateValue(value: any): void {

    resolvedPromise.then(() => { 

      // set value will set form control

      this.control.setValue(value, {emitViewToModelChange: false}); 

    });

}

But to make it happen Angular should recognize the changes during change detection cycle. And since we hasn't changed our model it won't trigger ngOnChanges hook:

What I explained till now was API part. Lets come back to the question.

Try below snippet in stackblitz, what our expectation would be. On input value change it should set that value to 10 itself.

<input type="text" 

  [ngModel]="model.rate" 

  (ngModelChange)="model.rate = 10"

  name="rate" />

Unfortunately, it doesn't happen in that way, you will see that on initial typing any number, it will change input value to 10 and later whatever you will type will keep on appending to number input. Ahh, wondering why?

Lets go back again to original question,

<input type="text" 

  [ngModel]="model.rate" 

  (ngModelChange)="model.rate=roundRate($event)"

  name="rate" />

 {{model.rate}}

ngModel used as one way binding. Expected behavior is, whatever values assigned to the model.rate should be reflected inside the input. Let's try to enter 1.1 you will see that it shows us value 1.1. Now try to enter 1.2, results in 1.2 results in 1. Wondering why? But certainly model.rate bindings update correctly.
Similarly Check for 4.6, 4.8 result in 5 which works perfect.

Let's break it down above example, what happens when you try to enter 1.1.

1. type 1 => model.rate becomes 1
   


2. type 1. => model.rate stays 1
   


3. type 1.1 => model.rate stays 1
   

Eventually when you type 1.1 or 1.2 model value stays 1 since we Math.round value. Since it isn't update model.rate value, whatever you enter further are just ignore by ngModel binding, and shown inside input field.

Check for 4.6, 4.8 works perfectly. Why? break it down step wise

1. type 4 => model.rate becomes 4
   


2. type 4. => model.rate stays 4
   


3. type 4.6 => model.rate becomes 5
   

Over here when you enter 4.6 in textbox, Math.round value becomes 5. which is change in model.rate(ngModel) value would result in update in input field value

Now start reading answer again, the technical aspect explained initially will be cleared as well.

Note: While reading an answer follow the links provided to snippet, it
may help you understand it more precisely.

To make it working you can try updating your fields on blur/change where this event fire up on focus out of fields like Sid's answer. It worked because you're updating model once when field is focused out.

But it works only once. To keep updates constantly we can do some trick:

this.model.rate = new String(Math.round(value));

which will result in a new object reference each time we round our value.

Snippet in Stackblitz

In Angular change detection strategy help to reflect changes on UI.

Please use below code:

Step 1: Import ChangeDetectorRef in your component

import { ChangeDetectorRef} from angular/core';

Step 2: Create instance of ChangeDetectorRef on constructor.

constructor(private ref: ChangeDetectorRef){

}

Step 3: Call where you are updating value.

this.ref.detectChanges();