1

I try to modify the text from the input to clear all letters 'a'. With ngModelChange, the model has been changed, but the value in the input would not until I type another valid letter. I can use something with view child likes input.value = this.testStr after update model, but I wonder why the value in the input does not follow the model and if any better ways to deal with that. enter image description here

Follow the topic at (ngModelChange) does not update the UI for specific input, I can change from using ngModelChange to (change) event, but that only work the input blurs. I want to change the input value immediately after typing. I tried with ChangeDetectorRef after updating this.testStr but it doesn't work also.

Einsamer
  • 1,069
  • 4
  • 17
  • 34
  • Have you tried `(input)="yourFunction()"` – navnath Sep 25 '21 at 12:55
  • Yes, I have. The model changed but the input value still stayed. E.g.: input "1aaaaaa", the model will be "1", the text in input still "1aaaaaa" but when you put next "1", the input and model will be "11" for both. – Einsamer Sep 25 '21 at 16:52

1 Answers1

4

you need also change the "value" of the input

<!--see that pass the input using a template reference variable-->
<input #input [ngModel]="testStr" 
              (ngModelChange)="validateInput($event,input)">

  validateInput(e: any, input: any = null) {
    const text = e.replace(/a/g, '');
    this.testStr = text;
    if (input.value != text) {
      const start = input.selectionStart - 1;
      input.value = text;
      input.selectionStart = input.selectionEnd = start;
    }
  }

NOTE: It's necessary get the selectionStart if you type in the middle of the input.

See the stackblitz

NOTE2: please, don't attach image with code in an answer, it's better you write the code (after write code you select it and use Ctrl+K to formatter). It's makes more easy respond your question

Eliseo
  • 50,109
  • 4
  • 29
  • 67