使用带有errors.validation的验证器时出错答案

【问题标题】：Error when use validators with errors.validation使用带有errors.validation的验证器时出错
【发布时间】：2021-05-23 17:29:00
【问题描述】：

学习 Angular 11，我正在学习一门课程，但在使用反应式表单时我卡在了验证部分。在视频中，解释的人使用了这个：

*ngIf="formularioCreado.controls['correo'].errors.required"

*ngIf="formularioCreado.controls['correo'].errors.email"

而且工作正常，但我不知道他使用的是什么 Angular 版本。我写的代码和他一样，但总是同样的错误。

<div class="form-group">
  <input class="form-control" type="email" placeholder="Correo" formControlName="correo">

  <div *ngIf="formularioCreado.controls['correo'].invalid && formularioCreado.controls['correo'].dirty">

    <div class="alert alert-danger" role="alert" *ngIf="formularioCreado.controls['correo'].errors.required">
      Campo requerido
    </div>

    <div class="alert alert-danger" role="alert" *ngIf="formularioCreado.controls['correo'].errors.email">
      No es un correo electronico
    </div>

  </div> 
</div>

错误

Object is possibly 'null'.ngtsc(2531)

【问题讨论】：

标签： angular validation angular-reactive-forms angular-forms angular-formbuilder

【解决方案1】：

您没有在<input> 元素中使用required 属性。您必须将其添加到 <input> 元素中，以便 Angular 可以检查此验证器。

你的代码

<input class="form-control" type="email" placeholder="Correo" formControlName="correo">

修正

<input class="form-control" type="email" placeholder="Correo" formControlName="correo" required>

【讨论】：