Reactive form validation issue

Issue

*ngIf is not working properly

My form has invalid fields; the primary if condition is working perfectly but when I show a specific error message this is not working properly. ( Example : *ngIf="PopupForm.get('startdate').errors?.required)

<div *ngIf="PopupForm.get('startdate').errors && submitted">
   <div class="form-text error" *ngIf="PopupForm.get('startdate').errors?.required">Start date is required</div>  
</div>

Solution

Make a getter in your .ts file:

get getControls() {
    return this.PopupForm.controls;
}

.html

<div *ngIf="getControls.startdate.errors && submitted">
    <div *ngIf="getControls.startdate.touched && getControls.startdate.errors?.required">
       Start Date is required *
    </div> 
</div>

Answered By - Najam Us Saqib