모델 기반 양식 - 검사기 문제

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를 인식하지 못합니다 제출 버튼을 활성화하면, 첫 번째 이름을 공백으로두면 입력이 빨간색으로 변경되지 않습니다.

내가 뭘 잘못하고 있니?

편집 :

본인은 검증이 실패하는 경우 각 유효성 검사기는 ng-invalid CSS 클래스를 설정 여기

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

Answer 1

데모를 만들었습니다. 그러나 CSS에 ng-invalid을 정의하지 않았으므로 빨간색 경계선이 표시되지 않습니다. 당신은 CSS에서 스타일을 정의하면

가 작동 : 암호에 대한 MINLENGTH (5) 검증 빈 암호를 허용하는 이유

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

정확히 알고하지 마십시오. 앵귤러 버그이거나 의도 된 동작이거나 필수 유효성 검사기와 결합해야합니다.