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
– Edmar Miyake, Commented Oct 13, 2016 at 22:28
which is exactly the error? the browser's console launch any error? — Deoxyseia
– Deoxyseia, Commented Oct 13, 2016 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
– Rob, Commented Oct 13, 2016 at 23:26

Lance · Accepted Answer · 2018-04-23 03:09:31Z

3

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

answered Apr 23, 2018 at 3:09

Lance

3524 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-10-14 05:49:19Z

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, 2016 at 5:49

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

7 Comments

Rob Over a year ago

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"?

Günter Zöchbauer Over a year ago

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)="...".

Rob Over a year ago

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.

Günter Zöchbauer Over a year ago

I admit it sounds weird. What browser are you using?

Rob Over a year ago

Chrome Version 53.0.2785.143 (64-bit) OSX

|

Collectives™ on Stack Overflow

Angular2 ngModel change binding on Input type="number"

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related