angular - NgModel 并不总是更新文本输入

Question

我正在研究一个我希望ngModel根据某些条件获取更新的场景

模板：

<mat-form-field>
    <mat-label>val:</mat-label>
    <input matInput [(ngModel)]="someVal" (ngModelChange)="onChange($event)">
</mat-form-field>

零件：

someVal: number = 10;
onChange(val: number):void {
  if(val > 10){
    this.someVal = 0;
  }
}

在第一次尝试将值更改为大于 10 时，视图会更新。但随后的变化不会。是什么导致了这种行为，如何解决这个问题？

Answer 1

不要这样做 ...

[(ngModel)]="someVal" (ngModelChange)="onChange($event)"

做这个 ...

[ngModel]="someVal" (ngModelChange)="onChange($event)"

onChange(val: number):void {
  if(val > 10) val = 0;
  this.someVal = val;
}

Answer 2

作为一种解决方法，我现在这样做了。

private _cdRef: ChangeDetectorRef

public someVal: number = 10;
onChange(val: number):void {
  if(val > 10){
    this.someVal = null;
    this._cdRef.detectChanges();
    this.someVal = 0;
  }
}

Answer 3

添加名称属性。

<input matInput name="val" [(ngModel)]="someVal" (ngModelChange)="onChange($event)">