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

使用安全导航操作符&nbsp;?。它检查变量是否是null或undefined这样我们的模板不会尝试选择虚假的属性。在您的情况下，在您尝试使用.operator访问对象属性的模板中使用它，例如：*ngIf="isSubmitted && fControls?.home?.errors"注意：你不应该使用相同的模型绑定[(ngModel)]="employee?.name"是错误的