Angular7 - [ngModel] не обновляется в компоненте при вводе одного и того же значения дважды

Пример минимального Stackblitz

https://stackblitz.com/edit/angular-mqqvz1

В приложении Angular 7 я создал простой компонент с полем <input>.

Когда я изменяю значение ввода с клавиатуры, я хочу, чтобы значение форматировалось как onBlur. - В минимальном примере я просто хочу добавить к нему строку "EDIT".

Это в основном работает:

  • Если я ввожу «тест» и размываю поле, оно будет изменено на «тестовый РЕДАКТИРОВАТЬ».
  • Если я наберу «лала» и размываю поле, оно будет изменено на «лала РЕДАКТИРОВАТЬ»

Однако когда я ввожу «тест» - размытие (работает) и снова набираю «тест», это больше не работает!

Вызывается onInputUpdate()-функция (вы можете увидеть это в журнале консоли), переменная inputValue обновляется (вы можете видеть это в компоненте {{inputValue}}), Однако входное значение не меняется! I ожидайте, что это будет «тестовый РЕДАКТИРОВАТЬ», но он останется «тестовым».

Когда я набираю другую строку, она работает, однако ввод одной и той же строки 2 раза подряд не работает. Это почему? Как я могу это исправить?

component.html

{{inputValue}} <br />
<input type="text"
       [ngModel]="inputValue"
       (ngModelChange)="onInputUpdate($event)"
       [ngModelOptions]="{ updateOn: 'blur' }"/>

component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {

  inputValue = "teststring";

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  public ngOnInit() {
    this.inputValue = "initial";
  }

  public onInputUpdate(inputValue: string) {
    this.inputValue = inputValue + ' EDIT';
    this.changeDetectorRef.markForCheck();
    console.log('onInputUpdate new inputValue', this.inputValue)
  }
}

angular angular7 angular-changedetection angular-components angular-ngmodel
person Michael B    schedule 07.01.2019    source источник
comment
Есть ли конкретный случай для флага updateOn отличного от значения по умолчанию change?   -  person Chris W.    schedule 08.01.2019
comment
Попробуйте сделать свой onFocus, чтобы сбросить его? stackoverflow.com/questions/32019330/   -  person Diodeus - James MacFarlane    schedule 08.01.2019
comment
Я хочу, чтобы обновлялось только значение onBlur, поэтому я установил `[ngModelOptions] = {updateOn: 'blur'}`   -  person Michael B    schedule 08.01.2019

Ответы (1)


arrow_upward
5
arrow_downward

Чтобы убедиться, что поле ввода обновляется после повторного ввода того же значения, заставьте представление сначала обновить необработанный текст, вызвав ChangeDetectorRef.detectChanges:

public onInputUpdate(inputValue: string) {
  this.inputValue = inputValue;            // Set value to raw input text
  this.changeDetectorRef.detectChanges();  // Trigger change detection
  this.inputValue = inputValue + ' EDIT';
  this.changeDetectorRef.markForCheck();
}

См. этот stackblitz для демонстрации.

person ConnorsFan    schedule 07.01.2019
comment
Идеально! Именно так, как я хочу, чтобы он вёл себя. Спасибо! - person Michael B; 08.01.2019