时间戳

首页 > 解决方案 > 单击表单中的提交时出现“错误类型错误：无法读取 null 的属性‘必需’”（使用 Angular 进行验证）

angular - 单击表单中的提交时出现“错误类型错误：无法读取 null 的属性‘必需’”（使用 Angular 进行验证）

问题描述

我正在尝试向表单添加验证。当我添加该userFormsErrors部分时，表格开始表现得很有趣，我似乎无法解决问题。

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

我的第二个问题是电子邮件验证和密码确认不起作用（在我进行这些最近的更改 iirc 之前它们曾经起作用）。

我的第三个问题是我在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);
  }

标签： angularformsvalidationinput

解决方案

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

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

推荐阅读