angular – 异步自定义验证会导致控制台出错：“无法在Object.ev

发布时间：2020-12-17 07:25:13 所属栏目：安全来源：网络整理

导读：目前,我正在研究MaximilianSchwarzmüllerAngular4教程的反应形式.在作业中,我必须创建一个反应形式,我做了.然后我不得不创建一个自定义异步验证器,它检查控件的值.它不应该等于’测试’.这是我的打字稿代码： import {Component,OnInit} from '@angular/cor

目前,我正在研究MaximilianSchwarzmüllerAngular4教程的反应形式.在作业中,我必须创建一个反应形式,我做了.然后我不得不创建一个自定义异步验证器,它检查控件的值.它不应该等于’测试’.这是我的打字稿代码：

import {Component,OnInit} from '@angular/core';
import {FormControl,FormGroup,Validators} from '@angular/forms';

import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  statuses = ['Stable','Critical','Finished'];
  signupForm: FormGroup;

  ngOnInit() {
    this.signupForm = new FormGroup({
      'projectName': new FormControl(null,[Validators.required],this.forbiddenName),'email': new FormControl(null,[Validators.required,Validators.email]),'projectStatus': new FormControl('Stable')
    });
  }

  onSubmit() {
    console.log(this.signupForm.value);
    console.log(this.signupForm);
  }

  forbiddenName(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve,reject) => {
      setTimeout(() => {
        if (control.value === 'Test') {
          resolve({'projectNameIsForbidden': true});
        } else {
          resolve(null);
        }
      },2000);
    });
    return promise;
  }

}

这是我的HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="project-name">Project name</label>
          <input type="text" id="project-name" class="form-control" formControlName="projectName">
          <div class="help-block" *ngIf="!signupForm.get('projectName').valid && signupForm.get('projectName').touched">
            <span *ngIf="signupForm.get('projectName').errors['required']">Can't be empty!<br></span>

            <span *ngIf="signupForm.get('projectName').errors['projectNameIsForbidden']">This name is forbidden!</span>
          </div>
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" class="form-control" formControlName="email">
          <div class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched">
            <span *ngIf="signupForm.get('email').errors['required']">Can't be blank!<br></span>
            <span *ngIf="signupForm.get('email').errors['email']">Has invalid format!</span>
          </div>
        </div>
        <div class="form-group">
          <label for="project-status">Project Status</label>
          <select id="project-status" class="form-control" formControlName="projectStatus">
            <option *ngFor="let status of statuses">{{ status }}</option>
          </select>
        </div>
        <button class="btn btn-success" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

它似乎工作正常,它在我的视图中给了我相应的错误消息,但在控制台中,我在projectName控件中的每个keydown上收到一个错误.这是错误：

那么,出现错误的原因是什么？谢谢你.

错误的原因在于：

<span *ngIf="signupForm.get('projectName').errors['required']">
   Can't be empty!
</span>

当您输入错误时,将变为null,如果您在异步验证程序完成评估之前从字段移动,则错误将为null,因此Angular无法读取它.这可以使用安全导航运算符来解决：

<span *ngIf="signupForm.get('projectName').errors?.required">

但是因为我更喜欢显示消息使用hasError,所以我会改为将这两个验证改为：

<span *ngIf="signupForm.hasError('projectNameIsForbidden','projectName')">
<span *ngIf="signupForm.hasError('required','projectName')">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!