Как добиться реакции на событие onchange в angular с помощью ngModelChange
HTML:
<mat-form-field appearance = "outline"class = "inputBox">
<input matInput name = "total" placeholder = "0.00" [ngModel] = "total"
(ngModelChange) = "handleOnChange('total', $event)" />
</mat-form-field>
ТС:
public handleOnChange = (field, e) => {
console.info("hell", field)
this.total=90
}
значение this.total должно оставаться постоянным и равным 90 после того, как любое событие изменения запускает метод handleOnChange, и 90 должно постоянно отображаться как значение в поле ввода. Это логика, которую я пытаюсь достичь, но когда сначала происходит onChange время значение ввода изменяется на 90, но после первого нажатия любой клавиши значение изменяется. например. 90а, 90тихуил, 90оой....
я родом из реакции. как добиться события onChange во входном теге реакции в angular?
Ответы 2
Удалить событие (ngModelChange)
<mat-form-field appearance = "outline"class = "inputBox">
<input matInput name = "total" placeholder = "0.00" [ngModel] = "total"/>
</mat-form-field>
Теперь инициализируйте значение суммы в конструкторе, чтобы оно оставалось неизменным до изменения ввода.
constructor() {
this.total=90
}
Теперь замените [ngModel]="total" на [(ngModel)]="total", и оно автоматически присвоит новое значение общему значению, и оно отразится на входных данных, а также добавит [value]="total" для преобразования исходного значения во входные данные.
Итак, окончательный код будет
<mat-form-field appearance = "outline"class = "inputBox">
<input matInput name = "total" placeholder = "0.00" [(ngModel)] = "total" [value] = "total"/>
</mat-form-field>
но в то время как изначально я хочу, чтобы ввод имел нулевое значение только тогда, когда пользователь вводит что-либо во ввод, мне нужно, чтобы он был изменен на 90
Затем не назначайте сумму в конструкторе и удаляйте [value] = "total" из ввода.
Мы можем просто передать поле ввода непосредственно в функцию и установить значение, соответствующее желаемому результату, это отменит любые изменения!
HTML
<mat-form-field>
<mat-label>Input</mat-label>
<input
matInput
name = "total"
placeholder = "0.00"
[ngModel] = "total"
#input
(ngModelChange) = "handleOnChange('total', $event, input)"
/>
</mat-form-field>
тс
public handleOnChange = (field: any, e: any, input: any) => {
console.info('hell', field);
this.total = 90;
input.value = 90;
};
Ничто не мешает вам обращаться с
onchangeотдельно:<input (change) = "doSomething($event)" [ngModel] = "someValue">