Angular2/4 ngControlに入力フィールドをバインドできません - 未定義の 'errors'プロパティを読み取ることができません

Question

入力フィールドのスペースをチェックするカスタムバリデータがありますが、入力フィールドがコンストラクタに対して未定義になっている理由を理解できません。

CustomValidationComponent：

import {Component} from '@angular/core'; 
import {FormControl, FormGroup, FormBuilder} from '@angular/forms'; 
import {UsernameValidators} from './usernameValidators'; 

@Component({ 
    selector: 'custom-validation', 
    template: ` 
    <div [formGroup]="usernameGroup"> 
     <input type="text" placeholder="Name" formControlName="username"> 
     <div *ngIf="username.errors.cannotContainSpace"> Without spaces! </div> 
    </div> 
    ` 
}) 

export class CustomValidationFormComponent { 

    usernameGroup: FormGroup; 

    constructor(fb: FormBuilder){ 
    this.usernameGroup = fb.group({ 
     username: ['', UsernameValidators.cannotContainSpace], 
    }); 
    } 

UsernameValidator：

import {FormControl} from '@angular/forms'; 

export class UsernameValidators { 
    static cannotContainSpace(control: FormControl){ 
    if (control.value.indexOf(' ') >= 0) 
     return { cannotContainSpace: true }; 

     return null; 
    } 
} 

PLUNKER

Answer 1

あなたusername formControlに直接アクセスするためのクラス変数ではありません。 のFormGroupからアクセスできます。

<div *ngIf="usernameGroup.controls['username'].errors?.cannotContainSpace"> 

それともマヌエルZametterが述べたように：

<div *ngIf="usernameGroup.controls.username.errors?.cannotContainSpace"> 

?.は、それがundefinedかnullである場合、エラーのチェックを行い、安全な航行演算子です。

Plunker