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

问题描述

学习 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)

解决方法

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

您的代码

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

更正

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