Why mat-error not get displayed inside mat-form field in angular material 6 withcustom global...

i am using angular material 6 ,i have a vaidation inside mat-form-field mat-error is not displayed , when move after mat-form-field to the mat-error which is displaying properly.

Not Working code:

<mat-form-field>
<input matInput type="time" formControlName="ToTime"/> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>
</mat-form-field>


Working Fine:


<input matInput type="time" formControlName="ToTime"/> </mat-form-field>
<mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>


Some one explain why which is not working inside that control.

Live Demo: stackblitz

Continue reading...