How to force an update to a template when a property doesn't change in angular 4

Question

In my component which has a template like so

template: '<input type="text" value="{{formattedValue}}">',

When certain bad inputs are entered the internal formattedValue property doesn't change, but I then want the UI to then update to show the last correct value.

For example, if the components this.formattedValue is 1,000 and the user update the input to have the text 1,000x I then want to the input to be 1,000 again. Currently this doesn't happen. Of course I can update the DOM with the Dom api in the function but I would prefer to use the template.

Answer 1

template: '<input type="text" [ngValue]="formattedValue" (ngValueChange)="checkValue($event)">',


formattedValue:string = '';
constructor(private cdRef:ChangeDetectorRef) {}

checkValue(event) { 
  if(event == /* invalid */) {
    this.cdRef.detectChanges();
  } else {
    this.formattedValue = event;
  }
}