Изменение привязки значения к ng-модели не меняет значение входного текста
У меня есть текстовое поле ввода, которое использует привязку ngModel к переменной внутри класса компонента. При нажатии кнопки я хочу очистить вводимый текст, однако изменение значения переменной не меняет вводимый текст.
Я переназначил переменную и вызвал функциюDetectChanges() из ChangeDetectorRef, но она все равно не работает.
Это шаблон, который у меня есть
<form #beaconForm = "ngForm" autocomplete = "off">
<input #searchBox
id = "search-query"
name = "search-query"
[ngModel] = "inputValue"
(ngModelChange) = "searchAutocomplete($event)"
(keydown) = "onKeyDown($event, searchBox)"
(blur) = "onBlur()"
(focus) = "onFocused(searchBox.value)">
<button color = "accent" mat-mini-fab (click) = "action(searchBox.value)"><mat-icon>add</mat-icon></button>
</form>
Затем при нажатии на действие, которое я хочу сделать
private inputValue: string = "";
action(value) {
this.inputValue = "";
this.cd.detectChanges();
}
Я ожидаю, что это очистит ввод, но это не так. Есть идеи, где моя ошибка?
И вы должны ввести [(ngModel)] = "inputValue"
@xyz спасибо за демо-код. Ваше решение работает впервые, но поскольку оно не является двусторонним, поэтому, когда я попытался снова ввести ввод, а затем снова нажать кнопку, он не очищает ввод.
@ user3794740 не стесняйтесь принять ответ, если он вам помог!
Ответы 4
Это должно быть [(ngModel)] = "inputValue", если вы хотите двустороннюю привязку данных. [ngModel] отлично работает для односторонней привязки данных.
Попробуйте изменить код следующим образом:
<form #beaconForm = "ngForm" autocomplete = "off">
<input #searchBox id = "search-query" name = "search-query"
//
[(ngModel)] = "inputValue"
(ngModelChange) = "searchAutocomplete($event)"
(keydown) = "onKeyDown($event, searchBox)"
(blur) = "onBlur()"
(focus) = "onFocused(searchBox.value)" >
<button color = "accent" mat-mini-fab (click) = "action(searchBox.value)">
<mat-icon>add</mat-icon>
</button>
</form>
[ngModel] подходит, если пользователь хочет сделать одностороннюю привязку
Ах да, сделайте двухстороннюю привязку, чтобы решить проблему. Спасибо
@PrashantPimpale Я понял после комментария OP, что возникла проблема с односторонней привязкой, лучше придерживаться двухсторонней привязки.
@xyz Я только что узнал, что [ngModel] работает для односторонней привязки данных! Спасибо!
Try this.
[(ngModel)] = {{inputValue}}
Смотрите следующую рабочую версию: https://stackblitz.com/edit/angular-cqpqjj
тс
inputValue: string = "";
action(value) {
this.inputValue = "";
}
HTML
<form #beaconForm = "ngForm" autocomplete = "off">
<input #searchBox
id = "search-query"
name = "search-query"
[(ngModel)] = "inputValue">
<button color = "accent" mat-mini-fab (click) = "action(searchBox.value)">add</button>
</form>
<span>#{{inputValue}}#</span>
После вашего комментария я понял, почему у вас не работает односторонняя привязка.
Начнем с inputValue = 1111
При нажатии кнопки, которая запускает вызов метода action(), мы устанавливаем inputValue на ''. Теперь всякий раз, когда мы напрямую изменяем значение в поле ввода, значение переменной inputValue не изменяется, поскольку ее односторонняя переменная связывается. Так что теперь значение inputValue остается как '', даже если в поле ввода есть какое-то значение. Когда мы вызываем action(), он возвращается к ''. Но подождите, это уже было '', поэтому представление не нужно обновлять (даже ручное обнаружение изменений не сработает, потому что angular не увидит никаких изменений).
Чтобы решить вашу проблему, вы можете использовать [(ngModel)], как это предлагают все.
Если вы хотите попробовать, вы все еще можете использовать [ngModel], но просто обновите значение переменной при изменении ввода.
Что-то типа:
searchAutocomplete(e) {
this.inputValue = e
// rest of the code
}
Но это просто для ясного понимания, нам не нужен этот обходной путь, если двусторонняя привязка может решить проблему.
https://stackblitz.com/edit/angular-rcdty6?file=src%2Fapp%2Fapp.component.html
Воспроизведите вашу проблему, я пробовал, здесь работает stackblitz.com/edit/…