Reactive form validation issue-CodePudding

*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  *ngIf="PopupForm.get('startdate').errors?.required">Start date is required</div>  
</div>

CodePudding user response：

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>

CodePudding user response：

did you try to do something like this ?

<div *ngIf="PopupForm.get('startdate')!.invalid && (PopupForm.get('startdate')!.dirty || PopupForm.get('startdate')!.touched)">
    <small 
           *ngIf="PopupForm.get('startdate')?.errors?.required">
           This field is required.
    </small>
</div>