如何在 angular 7 中验证自定义输入文本框

Question

我正在尝试为 angular 7 中的自定义文本框显示模板驱动的验证错误消息，但没有显示 working.Anyone 可以找到问题吗？如何解决此问题？

演示：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

问题出在 class invalid-feedback 上，它在加载时隐藏了元素。

尝试删除它，它工作正常。您应该开始看到错误消息。

建议将显示错误的嵌套 div 元素合并为一个，并有条件地添加 class 作为

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

如何在 angular 7 中验证自定义输入文本框

How to validate custom input textbox in angular 7

angular6

angular5

angular7

angular-forms