角度 2 中的表单验证错误消息

Question

自定义输入框验证错误消息在 angular2 中不起作用，并且要求也不起作用。如何解决此问题。任何知道的人请帮助我。

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

问题在于 invalid-feedback 类在加载时隐藏元素。

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

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

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