Angular 5自定义验证显示异常

我正在学习Angular 5反应式表单，并尝试制作一个示例自定义验证器，在表单上显示错误消息。当我尝试在项目名称字段（此处称为“namey”）中键入任何内容时，会出现以下异常（给出的行号仅指向HTML中输入的开头）：

以下是组件代码：

ngOnInit() {
  this.projectForm = new FormGroup({
    namey: new FormControl(null, [Validators.required, this.cannotBeTest1]),
    email: new FormControl(null, [Validators.required, Validators.email]),
    status: new FormControl('1')
  });
}

以下是自定义验证程序代码：

cannotBeTest1(control: FormControl): {[s: string]: boolean} {
  const name: string = control.value;
  if (name && name.toLowerCase() === 'test') {
    return {'cannotBeTestx': true};
  } else {
    return null;
  }
}

以下是该元素的HTML（还有几个其他表单元素工作正常，之后是一个结束表单标记）：

有趣的是，如果我删除HTML中的错误消息显示，自定义验证器将正常工作（我无法将项目名称设置为“test”），我将得到另一个通用错误消息显示。因此，这似乎与我检查自定义验证器是否无效的方式有关，但我一辈子都搞不清楚它是什么

谢谢你的帮助

试试这个

<span class="help-block" *ngIf="projectForm.controls['namey'].hasError['cannotBeTestx'] && (projectForm.controls['namey'].touched || formSubmitted)">

<span class="help-block" *ngIf="!projectForm.controls['namey'].valid && (projectForm.controls['namey'].touched || formSubmitted)">

<form class="ui form-vertical" [formGroup]="projectForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="project-name">project Name</label>
      <input
        class="form-control"
        type="text"
        id="project-name"
        placeholder="Enter project name"
        formControlName="namey"
      />
      <span class="help-block" *ngIf="projectForm.get('namey').errors['cannotBeTestx'] && (projectForm.get('namey').touched || formSubmitted)">-->
        please enter a valid project name
      </span>
      <span class="help-block" *ngIf="!projectForm.get('namey').valid && (projectForm.get('namey').touched || formSubmitted)">
        please enter a project name
      </span>
    </div>

projectForm.get('namey').errors['cannotBeTestx']

<span class="help-block" *ngIf="projectForm.controls['namey'].hasError['cannotBeTestx'] && (projectForm.controls['namey'].touched || formSubmitted)">

<span class="help-block" *ngIf="!projectForm.controls['namey'].valid && (projectForm.controls['namey'].touched || formSubmitted)">