如何为表单验证生成错误消息
Posted
技术标签:
【中文标题】如何为表单验证生成错误消息【英文标题】:How to generate error message for form validation 【发布时间】:2019-03-22 08:05:21 【问题描述】:尝试为表单验证生成错误消息,但我不知道如何生成错误消息。我想为错误创建 html 元素,例如“请通过 typescript 在输入元素下方动态输入值。怎么做?
ngOnInit()
this.ngForm = this._fb.group(
name: ['', Validators.required],
email: ['', Validators.required,Validators.pattern(this.emailPattern)]
);
【问题讨论】:
【参考方案1】:您可以使用一个电子邮件验证器。
ngOnInit()
this.ngForm = new FormGroup(
name: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required,Validators.email])
);
然后在你的html中
<form [formGroup]="ngForm" (submit)="submitform()">
<input type="text" class="form-control" name="name" formControlName="name"/>
<div *ngIf="ngForm.get('name').hasError('required')" style="color:red;">
Name is required.
</div>
<input type="text" class="form-control" name="email" formControlName="email"/>
<div *ngIf="ngForm.get('email').hasError('required')" style="color:red;">
Email is required.
</div>
<div *ngIf="ngForm.get('email').hasError('email')" style="color:red;">
Please enter the correct email or valid email.
</div>
<button>Submit</button>
</form>
【讨论】:
我们可以创建此错误消息吗(请输入正确的电子邮件或有效电子邮件。)在所有字段的输入元素动态后通过打字稿?? 我不确定我是否完全理解这个问题,但会尽力回答。由于 formControlName 对于每个输入都是唯一的,因此您必须为每个唯一的 formControlName Name 编写自定义错误是必填字段。 请查看修改后的答案,代码在您的 stackblitz 中验证,并且应该能够复制和粘贴。以上是关于如何为表单验证生成错误消息的主要内容,如果未能解决你的问题,请参考以下文章