Angular2/4 Невозможно привязать поле ввода к ngControl - Невозможно прочитать свойство 'ошибки' неопределенного

Question

У меня есть собственный Validator для проверки пробелов в поле ввода, но я не могу понять, почему поле ввода не определено для конструктора.

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 который userNameGroup,

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

Или, как говорил Мануэль Заметтер:

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

?. является оператором безопасной навигации, который проверяет ошибки, если undefined или же null,

Plunker