角5カスタム検証表示例外

Question

私はAngular 5反応型フォームの学習に取り組んでおり、フォームにエラーメッセージを表示するサンプルのカスタムバリデーターを作成しようとしました。私は（ここでは「namey」と呼ばれる）プロジェクト名]フィールドに何も入力しようとすると、私はこの例外を取得します（指定された行番号は、ちょうどHTMLでの入力の開始を指している）：

ここ

AppComponent.html:20 ERROR TypeError: Cannot read property 'cannotBeTestx' of null 
at Object.eval [as updateDirectives] (AppComponent.html:27) 
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14338) 
at checkAndUpdateView (core.js:13507) 
at callViewAction (core.js:13857) 
at execComponentViewsAction (core.js:13789) 
at checkAndUpdateView (core.js:13513) 
at callWithDebugContext (core.js:14739) 
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14276) 
at ViewRef_.detectChanges (core.js:11299) 
at eval (core.js:5783) 

コンポーネントのコードは次のとおりです。ここで

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です（罰金とTHA後に作業している他のフォーム要素のカップルがありますt）が終了フォームタグです：

<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'] 

興味深いことに、私は削除する場合そのエラーメッセージがHTMLに表示されると、カスタムバリデーターが正しく動作します（プロジェクト名を「テスト」にすることはできません）、他の一般的なエラーメッセージが表示されます。だから、それはカスタムバリデーターが無効であるかどうかを確認する方法についての何かのようですが、私の人生のためにそれが何であるか把握することはできません。

ありがとうございました！

Answer 1

この

<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)">