Как проверить пользовательский ввод текстового поля в угловых 7

Question

Я пытаюсь показать шаблонное сообщение об ошибке проверки для пользовательского текстового поля в angular 7, но не работает. Никто не может найти проблему? Как решить эту проблему?

Демонстрация: 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

Проблема связана с классом invalid-feedback, который скрывает элемент при загрузке.

Попробуйте удалить это, и все работает нормально.Вы должны начать видеть сообщения об ошибках.

Предложение объединить вложенные элементы div, которые показывают ошибку, в один и условно добавить класс как

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