angulartypescriptangular-ng-if

Angular how can I prevent the ngif update?


I have an object with many properties. I have a site where all those properties are listed with an input field connected via [(ngModel)] to the object. On those fields I have an *ngIf="isEmpty(propKey)" that checks if the propertie is empty.

I only want to show every property that currently doesn't has any value. The problem is as soon as I start to type in the input field, the field disappears because the property now has a value by pressing the first button on the keyboard. But I want to write more to it and not just a single char.

Is there a way that I can manually trigger the condition in the ngIf so I can update what properties are shown after I press my save button?


Solution

  • You can configure the input's ngModelOptions to update the model on blur or submit.

    <input 
      [(ngModel)]="myObject[prop.key]"
      [ngModelOptions]="{ updateOn: 'blur' }"
    />
    

    Here's a StackBlitz demo.