Блог

Я работаю над сценарием, в котором я хочу 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, представление обновляется. Но последующие изменения этого не делают. Что вызывает такое поведение и как его обойти?

Не делай этого …

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

сделай это …

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

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

Добавьте свойство name.

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

В качестве обходного пути я сделал это сейчас.

 private _cdRef: ChangeDetectorRef

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