Как принудительно обновить шаблон, если свойство не изменяется в angular 4

Question

В моем компоненте, который имеет шаблон, как это

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

При вводе определенных неверных входных данных внутреннее свойство formattedValue не изменяется, но затем я хочу, чтобы пользовательский интерфейс обновился, чтобы показать последнее правильное значение.

Например, если для компонента this.formattedValue установлено значение 1000, а пользователь обновляет ввод, чтобы иметь текст 1,000x Затем я хочу, чтобы вход снова был 1000. В настоящее время этого не происходит. Конечно, я могу обновить DOM с помощью Dom API в функции, но я бы предпочел использовать шаблон.

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;
  }
}