Null in ANGULAR html template

Issue

I get the following error in my input ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'null'.

this line that is causing the error.

<input [ngClass]="{ 'is-invalid': generalConfigurationForm.controls['buisnessName'].errors?.required }" class="form-control valid" id="buisnessName" formControlName="buisnessName" name="buisnessName" required="required" type="text" [(ngModel)]="generalConfiguration.buisnessName" />

What should I do when this line is null? I would like the result for 'is-invalid' to be false.

generalConfigurationForm.controls['buisnessName'].errors?.required

Solution

You are using ngModel with reactive form control. Remove ngModel and set form control value.

https://angular.io/api/forms/FormControlName#use-with-ngmodel-is-deprecated

Answered By - zainhassan