Angular Forms:如何避免多个 NgIf div 用于验证错误消息? [英] Angular Forms: How to avoid multiple NgIf divs for validation error messages?
问题描述
我想简化下面的代码:
<div *ngIf="form1.errors?.checkDate && (form1.touched || form1.dirty)" class="cross-validation-错误消息警报警报危险">日期不能在未来.
<div *ngIf="form1.errors?.notAfterDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger">出生日期必须在 1/1/1800 之后.
它应该只有 1 个 div *ngif
并将错误消息作为值传递而不是硬编码或使用 ngFor
?
非常感谢您对此的任何帮助.谢谢.
管理多个 Angular Form 验证消息的常用技术是将它们存储在映射中.
public validationMessages = {'名': [{ type: 'required', message: 'First Name is required' },{ type: 'maxlength', message: '名字只能包含 5 个字符.'}],'姓': [{ type: 'required', message: 'Last Name is required' },{ type: 'pattern', message: 'Last Name 不能是Smith".'}],'电子邮件': [{ type: 'required', message: 'Email is required' },{ type: 'email', message: '输入有效的电子邮件' }]}
HTML 模板
在模板中,使用 NgFor
遍历所需表单控件的验证消息.