如何在 Angular 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"