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"

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

1 个答案: