非同期カスタム検証でコンソールにエラーが発生する：Object.eval [as updateDirectives]でnullのプロパティ 'required'を読み取ることができません "

Question

現在MaximilianSchwarzmüllerAngular 4チュートリアルによる反応形式の割り当てに取り組んでいます。課題では、私は反応型を作り出さなければなりませんでした。次に、コントロールの値をチェックするカスタム非同期バリデーターを作成しなければなりませんでした。それは 'Test'と同じであってはなりません。これは私のtypescriptですコードです：

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コントロールのすべてのキーダウン時にエラーが発生しました。

は、なぜエラーが表示されます。これは誤りですか？先にありがとう。

Answer 1

エラーの原因はここにある：

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

あなたがため、角度はできない、nullなり、非同期バリデータは評価行っている前に、あなたがフィールドから移動した場合、errorsはnullなりますerrorsを入力している間それを読んで。

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

をしかし、私は、hasErrorを使用しているメッセージを表示することを好むように、私は、この代わりに、両方の検証を変更します：これは、安全なナビゲーション演算子を使用して解決することができる

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