Перезапись значения поля ввода html
Я новичок в angular, и я пытаюсь ограничить возможные значения в поле ввода числа.
Я хочу, чтобы значения были выше 0 и никогда не отображали никаких других значений в поле.
Я попытался сделать это, установив параметр min, но это работает только для стрелок. Я все еще могу вставить значение вручную (например, набрав -10).
Я могу переопределить значение в компоненте, но поле ввода по-прежнему показывает недопустимое значение.
Как я могу перезаписать значение поля ввода, если я обнаружил, что введены неверные данные?
Например: я ввожу -10, и в поле ввода сразу отображается 1.
HTML-код:
<p>
<input type = "number" [ngModel] = "numberValue" (ngModelChange)='onInputChange($event)'
min=1>
</p>
код компонента:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
numberValue:number = 1;
ngOnInit(){
}
onInputChange(value:number){
this.numberValue = Math.max(1,value);
}
}
Ответы 3
Я думаю, вы неправильно написали синтаксис [(ngModel)] (банан в коробке). Итак, вам нужно обновить файл html следующим образом:
<p>
<input type = "number" [(ngModel)] = "numberValue" (ngModelChange)='onInputChange($event)'
min=1>
</p>
В файле компонента ts вы можете получить доступ к значению $event, переданному в функцию onInputChange(), следующим образом:
onInputChange(event){
this.numberValue = Math.max(1,event.target.value);
}
Надеюсь, поможет!
Вам также необходимо изменить HTML-файл и файл машинописного текста, как показано ниже
В HTML
<p> <input type = "number" [(ngModel)] = "numberValue" (keyup)='onInputChange($event)' min=1></p>
В машинописном тексте
onInputChange(e){
this.numberValue = Math.max(1,e.target.value);
}
HTML код.
<p>
<input type = "number" [(ngModel)] = "numberValue" (ngModelChange)='onInputChange($event)'
min=1>
</p>
Используйте как скобки, так и скобки с ngModel, например, [(ngModel)] = "numberValue"
Угловой класс.
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
numberValue: number = 1;
constructor(private cdRef: ChangeDetectorRef) { }
ngOnInit() { }
onInputChange(value: number) {
this.cdRef.detectChanges();
this.numberValue = Math.max(1, value);
}
}
используйте ChangeDetectorRef для обновления ngModel.
Сработал оберег. Только один небольшой вопрос: например, [(ngModel)] = "numberValue" равно [ngModel] = "numberValue" (ngModelChange) = "numberValue = $ event". Итак, что именно делает [(ngModel)] = "numberVaue" (ngModelChange) = onInputChange ($ event) иначе, чем [ngModel] = "numberValue" (ngModelChange) = onInputChange ($ event)?
Я прочитал статью и нашел еще одну ветку, которая лучше формулирует мой вопрос здесь. Поскольку я считаю, что это другой вопрос, чем то, что я задал изначально, я помечаю его как решенный. Спасибо!
Я заметил, что если я использую [ngModel] = "numberVaue" (ngModelChange) = onInputChange ($ event) вместо [(ngModel)] = "numberVaue" (ngModelChange) = onInputChange ($ event), входное значение не обновляется должным образом до значение, которое я изменил внутри функции onInputChange.
Это работает почти так, как мне нужно, но я не могу удалить весь номер и ввести новый. Удаление последней цифры всегда перезаписывает ее сразу на 1. Есть ли способ предотвратить это?