Angular2 ngModel change binding on Input type="number"

Question

I have a number type input and when I try to change the value with an onChange event, it does not work.

I've tried the same for a text input and it works perfectly.

<input
   type="number"
   [(ngModel)]="element.value" 
   (change)="onChange($event)"
   >

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            //True, accept the value
        } else {
            this.element.value = 0;
            //Failed, set the input back to 0
        }
    }
}

I am new to Angular2 so what am I missing here?

PS. I have seen a similar issue with inputs that take bools

I couldn't make it work either. What I did was changing my input to `type="tel"` — Edmar Miyake, Oct 13 '16 at 22:28
which is exactly the error? the browser's console launch any error? — Deoxyseia, Oct 13 '16 at 22:42
no error at all, change event fires just fine and setting the value works fine. The UI just doesnt reflect the value being set from the change function — Rob, Oct 13 '16 at 23:26
If you dont know how to solve can you up vote to give some exposure to this? — Rob, Oct 14 '16 at 03:40

score 2 · Answer 1 · answered Apr 23 '18 at 03:09

changing to one-way binding worked for me, and it's cleaner not to fire the change if user cancels too (note I still had to manually update the DOM as you see):

<input
   type="number"
   [ngModel]="element.value"   // one way binding
   (change)="onChange($event)"
   >

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            this.element.value = $event.target.value
        } else {
            $event.target.value = 0;
            //Failed, set the input back to 0
        }
    }
}

score 0 · Accepted Answer · answered Oct 14 '16 at 05:49

0

Not tried but might work

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    constructor(cdRef:ChangeDetectorRef) {}

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            //True, accept the value
        } else {
            this.element.value = 0;
            this.cdRef.detectChanges(); // <<<=== added
            //Failed, set the input back to 0
        }
    }
}

answered Oct 14 '16 at 05:49

Günter Zöchbauer

623,577
216
2,003
1,567

That worked. Is that a work around for a bug in angular2.0.0 or is there a reason change binding works with type="text" and doesnt with type="number"? – Rob Oct 14 '16 at 13:47
I don't think it's a bug. Perhaps it's a timing issue. There is no execution order specified for multiple event bindings like in your (`(ngModel)` and `(change)`). You can also try if it works differently when you use `(ngModelChange)="..."` instead of `(change)="..."`. – Günter Zöchbauer Oct 14 '16 at 13:50
I tried `ngModelChange` and the event fires on keypress vs blur. In the case of a number field, backspacing the 0 or highlighting and overwritting fires it before you get a chance to enter a value. Still doesnt make sense why type="text" with same exact code works. – Rob Oct 14 '16 at 13:53
I admit it sounds weird. What browser are you using? – Günter Zöchbauer Oct 14 '16 at 13:55
Chrome Version 53.0.2785.143 (64-bit) OSX – Rob Oct 14 '16 at 15:33
Hard to tell. You can try with a bug report and see what response you get. – Günter Zöchbauer Oct 14 '16 at 15:36
FYI https://github.com/angular/angular/issues/12316 and https://embed.plnkr.co/CQHFQB4p71q2mtlZJ5u0/ and I am shocked that there is very little reportings of this. – Rob Oct 14 '16 at 22:11

Angular2 ngModel change binding on Input type="number"

2 Answers2