Angular 异步自定义验证会导致控制台出错：“0”；无法读取属性'；必需的'；在Object.eval[作为updateDirectives]处为null；

目前，我正在研究Maximilian Schwarzmüller的第四篇教程中的反应形式赋值。在作业中，我必须创建一个反应式表单，我做到了。然后，我必须创建一个自定义异步验证器，用于检查控件的值。它不应该等于“测试”。这是我的打字脚本代码：

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;
  }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormControl，FormGroup，Validators}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
状态=[‘稳定’、‘关键’、‘完成’]；
报名表格:FormGroup ;；
恩戈尼尼特（）{
this.signupForm=新表单组({
“projectName”：新FormControl（null，[Validators.required]，this.forbiddenName），
“电子邮件”：新FormControl（null，[Validators.required，Validators.email]），
“projectStatus”：新表单控件（“稳定”）
});
}
onSubmit（）{
log（this.signupForm.value）；
console.log（this.signupForm）；
}
禁止名称（控件：FormControl）：承诺

那么，为什么会出现错误呢？请提前感谢。
错误原因如下：


不能是空的！

当您键入
错误时
变为
空
，并且如果您在异步验证器完成评估之前从字段中移动，
错误
将变为
空
，因此Angular无法读取它。这可以使用安全导航操作符解决：



但由于我更喜欢显示消息使用的是
hasError
，因此我将两种验证改为：


由于某种原因，app.component.html中的
验证程序
第9行为
null
。
<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>