Angular Reactive Forms - 验证错误 - 无法读取未定义或空值的属性

Question

我花了很长时间来理解一些应该很容易的事情。表单验证。我第一次使用反应形式。我正在使用表单生成器。我有一组嵌套的控件。一般来说，我假设您创建了一组带有验证的控件，然后在模板中检查这些控件。我能够提交表单，但在尝试创建验证消息时不断收到错误消息。------ TEMPLATE -------<div class="container">  <div class="row">    <div class="col-sm">      <!-- Begin card -->      <div class="card border">        <div class="card-header bg-light text-primary">          <h3>My Account</h3>        </div>        <div class="card-body border border-light">          <!-- CHANGE PASSWORD BUTTON -->          <div class="row">            <div class="col-sm">              <button class="btn btn-success" (click)="goToChangePassword()">Change Password</button>            </div>          </div>          <!-- Begin Form -->          <form *ngIf="user; else loading" [formGroup]="accountForm" (ngSubmit)="updateUser()">            <hr>            <!-- Phone -->            <fieldset formGroupName="phone">              <div class="form-row">                <div class="form-group col-sm">                  <label>Home Phone</label>                  <input type="number" class="form-control" formControlName="home">                  <div *ngIf="isSubmitted && fControls.home.errors" class="invalid-feedback">                    <div *ngIf="fControls.home.errors.minlength">10 characters min</div>                  </div>                </div>                <div class="form-group col-sm">                  <label>Mobile Phone</label>                  <input type="number" class="form-control" formControlName="mobile">                  <div *ngIf="isSubmitted && fControls.mobile.errors" class="invalid-feedback">                    <div *ngIf="fControls.mobile.errors.minlength">10 characters min</div>                  </div>                </div>

Answer 1

使用安全导航操作符 ?。它检查变量是否是null或undefined这样我们的模板不会尝试选择虚假的属性。

在您的情况下，在您尝试使用.operator访问对象属性的模板中使用它，例如：*ngIf="isSubmitted && fControls?.home?.errors"

注意：你不应该使用相同的模型绑定[(ngModel)]="employee?.name"是错误的