在表单中单击提交时得到"ERROR TypeError: Cannot read property 'required‘of null“(使用Angular验证)

Question

我正在尝试向表单添加验证。当我添加userFormsErrors部件时，表单开始变得奇怪，我似乎无法解决这个问题。

我的第一个问题是，当单击按钮时，userFormErrors返回true，然后即使用户更改了输入，它也会保持true。

我的第二个问题是电子邮件验证和密码确认不起作用(在我最近做这些更改之前，它们是起作用的)。

我的第三个问题是，当我单击submit按钮，然后每次输入字段发生变化时，我都会得到ERROR TypeError: Cannot read property 'required' of null错误(这很可能与我的第一个问题有关)。

下面是用register.component.html和register.component.ts编写的代码

    <form action="get" href="#" #userForm="ngForm">
      <div class="row">
        <div class="col-md-6 px-2">
          <div class="form-group formfields noselect">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" id="firstName" [attr.placeholder]="'Enter Credential'" ngModel
              name="firstName" #firstName="ngModel" required="required" 
              [ngClass]="{ 'is-invalid': firstName.invalid && (firstName.dirty || firstName.touched) || userFormErrors }">
            <div class="invalid-credentials pl-3"
              *ngIf="firstName.invalid && (firstName.dirty || firstName.touched) || userFormErrors">
              <div *ngIf="firstName.errors.required">
                <p class="pt-2">Name is required</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 px-2">
          <div class="form-group formfields noselect">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName" [attr.placeholder]="'Enter Credential'" ngModel
              name="lastName" #lastName="ngModel" required="required"
              [ngClass]="{ 'is-invalid': lastName.invalid && (lastName.dirty || lastName.touched) || userFormErrors }">
            <div class="invalid-credentials pl-3"
              *ngIf="lastName.invalid && (lastName.dirty || lastName.touched) || userFormErrors">
              <div *ngIf="lastName.errors.required">
                <p class="pt-2">Error message here!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 px-2">
          <div class="form-group formfields noselect">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" [attr.placeholder]="'Enter Credential'" ngModel
              name="email" #email="ngModel" required="required" pattern="/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/"
              [ngClass]="{ 'is-invalid': email.invalid && (email.dirty || email.touched) || userFormErrors }">
            <div class="invalid-credentials pl-3"
              *ngIf="email.invalid && (email.dirty || email.touched) || userFormErrors">
              <div *ngIf="email.errors.required">
                <p class="pt-2">Email is required!</p>
              </div>
              <div *ngIf="email.errors.pattern">
                <p class="pt-2">You must type a valid email address!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 px-2">
          <div class="formgroup formfields noselect">
            <label for="location">Location</label>
            <select class="w-100" id="location" ngModel name="location" #location="ngModel" required="required"
              [ngClass]="{ 'is-invalid': location.invalid && (location.dirty || location.touched) || userFormErrors }">
              <option *ngFor="let country of countries" [value]="country.code">{{ country.name }}</option>
            </select>
            <img class="dropdown-icon d-inline" src="assets/images/icons/open-menu.svg">
            <div class="invalid-credentials pl-3"
              *ngIf="location.invalid && (location.dirty || location.touched) || userFormErrors">
              <div *ngIf="location.errors.required">
                <p class="pt-2">Error message here!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 px-2">
          <div class="form-group formfields noselect">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" [attr.placeholder]="'Enter Credential'" ngModel
              name="password" #password="ngModel" required="required"
              [ngClass]="{ 'is-invalid': password.invalid && (password.dirty || password.touched) || userFormErrors }">
            <div class="invalid-credentials pl-3"
              *ngIf="password.invalid && (password.dirty || password.touched) || userFormErrors">
              <div *ngIf="password.errors.required">
                <p class="pt-2">Password is required!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 px-2">
          <div class="form-group formfields noselect">
            <label for="confirmPassword">Confirm Password</label>
            <input type="password" class="form-control" id="confirmPassword" [attr.placeholder]="'Enter Credential'" ngModel
              name="confirmPassword" #confirmPassword="ngModel" required="required" nomatch="confirmassword.value != password.value"
              [ngClass]="{ 'is-invalid': confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched) || userFormErrors}">
            <div class="invalid-credentials pl-3"
              *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched) || userFormErrors">
              <div *ngIf="confirmPassword.errors.required">
                <p class="pt-2">Please retype your password!</p>
              </div>
              <div *ngIf="confirmPassword.errors.nomatch">
                <p class="pt-2">Do not match</p>
              </div>
            </div>
          </div>
        </div>
       <button type="submit" class="btn btn-primary w-100 sign-in-btn mx-2 my-3" href="#"
          (click)="onRegisterUser(userForm.valid, userForm.value)">Register</button>
      </div>
    </form>

  ngOnInit(): void {
    const notFocused = false;
  }

  onRegisterUser(isValid, data){
    if(!isValid) {
     return this.userFormErrors = true;
    }
    console.log(isValid, data);
  }

Answer 1

如果您的输入有效，则ngModel.errors可以为null。因此，您应该在请求required字段之前检查errors。您可以使用?来完成此操作，例如：someField.errors?.required。

如果需要通过更改输入来更新userFormErrors，则必须在更改时添加事件侦听器，并在任何输入更改时更新userFormErrors。但是，如果您需要获取表单的当前valid状态，则可以直接从ngForm获取。