如何使此验证符合要求？答案

【问题标题】：How to make this validation work with required?如何使此验证符合要求？
【发布时间】：2019-07-20 17:40:06
【问题描述】：

我正在尝试在我的应用程序中进行一些验证，但我不确定为什么我无法使其正常工作。我只想显示用户信息“需要电子邮件”，当他点击电子邮件输入并留空（甚至，当 se 进行一些更改时），以及与我的模式不匹配时有关“电子邮件无效”的信息。

我尝试了很多组合，但我不确定哪种组合最好，这就是为什么我决定一开始就让它变得简单。也许有人有更好的实现？

组件：

  public accountForm: FormGroup;

  constructor(private router: Router, private formBuilder: FormBuilder) { 
   }

   get formControls() { return this.accountForm.controls; }

  ngOnInit() {
    this.accountForm = this.formBuilder.group({
      email: [
        null,
        [
          Validators.required,
          Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
        ]
      ]
    });
  }

..

HTML：

...
    <form novalidate [formGroup]="accountForm">
      <div class="input-group mb-3 flex-nowrap">
        <input type="text" class="form-control" placeholder="Email" id="email" formControlName="email">
      </div>
      <div *ngIf="formControls.email.required" class="input-error">Email is required</div>
      <div *ngIf="formControls.email.invalid && formControls.email.touched" class="input-error">Email is invalid</div>
...

目前只有模式验证有效，无法正常工作。

【问题讨论】：

你可以为你的问题创建一个堆栈闪电战吗？
你能在你的<input> 元素上使用原生HTML required 属性吗？例如。就像这个 Angular 文档页面中的第一个示例：angular.io/guide/form-validation
@Collierre，如果使用 ReactiveForm，它不是必需的（是 Reactive 和 Template Form 之间的一种混合）

标签： angular forms typescript validation

【解决方案1】：

您应该查看内置的电子邮件验证器，而不是使用自定义模式。

您需要将电子邮件控件称为

accountForm.get('email').errors?.email

而不是直接引用FormControl，因为您在控制器类中实例化FormGroup 实例，您应该尝试在其中找到您的控制器

完整的工作示例位于：https://stackblitz.com/edit/angular-reactive-form-email-validator

【讨论】：