在组件模型属性上触发ngOnChanges

Question

On my template I have this line of code:

<input name="distanceA" id="distanceA" type="number" [(ngModel)]="distanceA"/> {{distanceA}} meter

In it's component.ts file I have this:

distanceA: number;

and further on this:

ngOnChanges(changes: any) {
    if (changes["distanceA"] ) {
       alert(changes["distanceA"].currentValue);
    }
    if (changes["distanceB"] ) {
       alert(changes["distanceB"].currentValue);
    }
}

However the ngOnChanges event doesn't fire when typing in the inputbox. What's the reason for this? How can I make this work? The binding itself works as I see what I type in the inputbox showing up on the page with {{distanceA}}

Answer 1

That's as designed. ngOnChanges isn't called when a property is modified, it's called when a bound value (bound with [distanceA]="propFromParent" ) is changed that causes the @Input() of the child component to be changed.

Just change your property to a getter/setter like

_distanceA: number;
get distanceA() { return this._distanceA; }
set distanceA(val:number) { 
  this._distanceA = val; 
  alert(val);
}

Answer 2

You can handle it with (keypress) event.

Short example.

<input placeholder="0-99999" minlength="1" maxlength="5" name="areaCode" [(ngModel)]="number" (keypress)="validateNumber($event)" required>

validateNumber(event): boolean {
    return event.charCode >= 48 && event.charCode <= 57;
}