モデル駆動型 - バリデーター発行

Question

私は単純なアプリをテストしています。これらは私のファイルです：

home.component.ts

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

@Component({ 
    selector: 'app-home', 
    templateUrl: 'home.component.html' 
}) 
export class HomeComponent { 
    form: FormGroup; 

    constructor(fb: FormBuilder) { 
     this.form = new FormGroup({ 
      'firstName': new FormControl('', Validators.required), 
      'password': new FormControl('', Validators.minLength(5)) 
     }); 
    } 
    onSubmit() { 
     console.log('model-based form submitted'); 
     console.log(this.form); 
    } 
} 

そして、これは、テンプレート・ファイルです：

<section class="sample-app-content"> 
    <h1>Model-based Form Example:</h1> 
    <form [formGroup]="form" (ngSubmit)="onSubmit()"> 
     <div class="form-field"> 
      <label>First Name:</label> 
      <input type="text" formControlName="firstName"> 
     </div> 
    <div class="form-field"> 
     <label>Password:</label> 
     <input type="text" formControlName="password"> 
    </div> 
    <p> 
     <button type="submit" [disabled]="!form.valid">Submit</button> 
    </p> 
</form> 

しかし、私はfirstnameを書くときので、それは、うまくValidatorsを認識していません送信ボタンを有効にすると、ファーストネームを空白にすると、入力は決して赤に変わりません。

私は間違っていますか？

EDITは：

私は検証が失敗した場合、角度バリデータがng-invalid CSSクラスを設定し、ここで

http://plnkr.co/edit/cs6N0n?p=preview

Answer 1

デモを作成しました。しかし、CSSにng-invalidを定義していないため、赤い枠線が表示されません。あなたはCSSでスタイルを定義する場合

は、それが動作します：パスワードはminLength（5）バリデータが空のパスワードを許可する理由

.ng-invalid { 
    border-color: #ff0000; 
} 

が正確に分かりません。それは、角張ったバグまたは意図された動作であり、必要なバリデーターと組み合わせる必要があります。