如何为表单验证生成错误消息答案

【问题标题】：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)]
   });
  }

【问题讨论】：

标签： angular6 angular2-forms angular-forms

【解决方案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 中验证，并且应该能够复制和粘贴。