angular 2 中的表单验证错误消息

Question

自定义输入框验证错误消息在 angular2 中不起作用，也不需要 working.How 来解决此问题 issue.Anyone 知道的请帮助我。

演示：https://stackblitz.com/edit/angular-7-template-driven-form-validation-kkqcwh?file=app%2Fapp.component.html

<div class="form-group">
<label for="firstName">First Name</label>
<app-textbox type="text" name="firstName" [(ngModel)]="model.firstName" 
[(inputModel)]="model.firstName" #firstName="ngModel"
 required></app-textbox>
<div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
<div *ngIf="firstName.errors.required">First Name is required</div>
</div>
</div>

Answer 1

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

尝试删除它，它工作正常。

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

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

angular 2 中的表单验证错误消息

Form validation error message in angular 2

validation

angular

angular5

angular7