Блог

У меня есть ввод типа числа, и когда я пытаюсь изменить значение с помощью события onChange, оно не работает.

Я пробовал то же самое для ввода текста, и он работает отлично.

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

Я новичок в Angular2, так чего же мне здесь не хватает?

PS. Я видел аналогичную проблему с входными данными, которые принимают bools

переход на одностороннюю привязку сработал для меня, и проще не запускать изменение, если пользователь тоже отменяет (обратите внимание, что мне все равно пришлось вручную обновлять DOM, как вы видите):

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

Не пробовал, но может сработать

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