Input's value changes but not rendered in DOM

Question

I'm trying to solve this thing I've got in my app:

I've a simple number input (not form, just a dummy input). I've created a "validation" inside my component's class. The problem is that if I change the input's value in code, first time the validator changes the value, but the second or more time the change isn't reflected in DOM. Here is a stackblitz example.

In my example app I have a really simple set-up:

app.component.html

<input type="number" [value]="inputValue" (change)="onInputChange($event.target.value)">

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public inputValue: number = 0;

  public onInputChange(event: number | string): void {
    const val = Number(event);
    if (val > 100) {
      this.inputValue = 100;
    }
  }
}

Steps:

change the value to 200 and press enter
since is larger than 100 the validator changes the input value to 100
change the value to 200 again and press enter
the value in DOM stays 200 instead of 100

My guess here is, that since second time the value of inputValue doesn't changes, the DOM doesn't got re-rendered. But if I trigger change detection manually, nothing happens.

Any idea guys?

Use `[(ngModel)]` instead of `[value]` [Read more](https://angular.io/api/forms/NgModel) — Sameer, Jan 17 '20 at 09:15
Thanks it works that way. I'm curious if I can do it just with [value]? — Runtime Terror, Jan 17 '20 at 09:25
Sorry! you can't [Read more](https://stackoverflow.com/a/42699787/11719787) — Sameer, Jan 17 '20 at 09:29

score 1 · Accepted Answer · answered Jan 17 '20 at 09:50

If you don't want to use ngModel, because you don't want to load the FormsModule, you can use the target input straight:

public onInputChange(input: HTMLInputElement): void {
  const val = Number(input.value);
  if (val > 100) {
    this.inputValue = 100;
    input.value = this.inputValue.toString();
  }
}

stack

Input's value changes but not rendered in DOM

1 Answers1