Why are the values ​shown differently?

Question

I try to set value by tag input Example for this case I type 1000.0009 (In input text) The valid values is need to be 1000.0001 but value is not correct in tag input but tag outside is correct

How to fix this?

I need to same value when change

Default

Set Value

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

@Component({
  selector: "my-app",
  template: `
    <section>
      <div class="jumbotron text-center">
        <h1 class="text-info">Data binding demo</h1>
        <div class="form-group">
          <input
            class="form-control"
            placeholder="Enter your name"
            [ngModel]="name | number: '1.4'"
            (change)="updateNumber($event.target.value)"
          />
        </div>
      </div>

      <div class="text-center">
        <h1>{{ number | number: "1.4" }}</h1>
      </div>
    </section>
  `
})
export class AppComponent {
  number: string = "";

  updateNumber(OldNumber: string) {
    let newNumber = parseFloat(OldNumber).toFixed(4);
    this.number = newNumber;
  }
}

Answer 1

Your ngModel of input tag is referring to wrong property. Use number property instead.

    <input
        class="form-control"
        placeholder="Enter your name"
        [ngModel]="number | number: '1.4'"
        (change)="updateNumber($event.target.value)"
     />

Adding stackblitz link for reference https://stackblitz.com/edit/angular-7nduih?file=src/app/app.component.html. Let me know if you face any issue.

Answer 2

This above situation is happening because the fraction digits after decimal point are not properly defined.

Make these code changes and verify:

 updateNumber(OldNumber: string) {
let newNumber = parseFloat(OldNumber).toFixed(5);
this.number = newNumber;}

---

<div class="text-center">
<h1>{{ number | number: "1.4-5" }}</h1></div>