Modell getriebene Formulare - Validierer Ausgabe

Question

Ich teste eine einfache App. Das sind meine Dateien:

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); 
    } 
} 

Und das ist die Template-Datei:

<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> 

Aber es ist nicht die Validators gut zu erkennen, denn wenn ich die firstname schreiben Es aktiviert den Submit-Button, wenn ich den Vornamen leer gebe, ändert sich die Eingabe nie in Rot.

Was mache ich falsch?

EDIT:

habe ich eine Demo hier

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

Answer 1

Der Winkelprüfer setzt die ng-invalid CSS-Klasse, wenn die Überprüfung fehlschlägt. Sie haben jedoch ng-invalid nicht in Ihrem CSS definiert, so dass Sie keinen roten Rahmen erhalten.

Wenn Sie den Stil im CSS definieren funktioniert es:

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

nicht genau wissen, warum die minLength (5) Validator für das Passwort ein leeres Passwort ermöglicht. Entweder ist es ein kantiger Bug oder ein beabsichtigtes Verhalten und Sie müssen es mit dem erforderlichen Validator kombinieren.