How to validate custom input textbox in angular 7

Question

I am trying to show template driven validate error message for custom textbox in angular 7 but not working.Anyone can find the issue?how to resolve this issue?

Demo:https://stackblitz.com/edit/angular-7-template-driven-form-validation-yzcwqc?file=app%2Fapp.component.html

app.component.html:

 <div class="form-group">
 <label for="firstName">First Name</label>
 <app-textbox type="text" name="firstName" [(ngModel)]="model.firstName" 
 #firstName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && 
 firstName.invalid }" required> 
 </app-textbox>   
 </div>

 <div class="form-group">
  <label for="email">Email</label>
  <app-textbox type="text" name="email" [(ngModel)]="model.email" 
  #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid 
  }" required email></app-textbox>
  </div>

Answer 1

Issue is with the class invalid-feedback which is hiding the element on load.

Try removing this and it works fine. You should start seeing the error messages.

A suggestion to combine the nested div elements which show the error into one and add class conditionally as

[class.invalid-feedback]="your condition"