Two way binding when deleting all input doesnt work 2 times in a row

Issue

I was trying to make it impossible for a input to be empty, however, when using "select all + backspace" , it updates the input only every other try.

https://stackblitz.com/edit/angular-empty-project-ece8aj?file=app%2Fapp.component.ts How to reproduce:

1. Select the input
2. CTRL + A
3. Delete
4. (The input will autofill)
5. Ctrl + A
6. Delete again
7. --- The input doesnt auto fill

I've tried even using the change detector ref but it didn't work. How could I approach this? I don't think using settimeout will be a good solution (I've tried, and it works using setTimeout())

Solution

That is a funny bug. I guess Angular change detection did not get the update in time that the value of ngModel changed. So, it thinks that the value just went from CANT BE EMPTY to CANT BE EMPTY, and therefore did not refresh the html.

Solution is to force change detection before setting this.name. Now it knows that the value is changing from an empty string to CANT BE EMPTY and the html refreshes.

export class AppComponent {
  constructor(private detectChange: ChangeDetectorRef) {}
  name = 'Angular 5';

  changeModel(value) {
    if (!value) {
      this.detectChange.detectChanges();
      this.name = 'CANT BE EMPTY';
    }
  }
}

https://stackblitz.com/edit/angular-empty-project-lknxj4?file=app/app.component.ts

Answered By - Chris Hamilton