Angular 2 Formularvalidierung wird minLength Validator arbeitet nicht

Question

Ich habe folgende Angular 2 bilden:

<register> 
    <form [ngFormModel] = "registrationForm"> 
     <div class = "form-group"> 
      <label class = "control-label" for="email">Email</label> 
      <input class = "form-control" type="email" id="email" ngControl="email" #email="ngForm"> 
     </div> 
     <div *ngIf = "email.touched && email.errors"> 
      <div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger"> 
       <span>Underscore is required</span> 
      </div> 
      <div *ngIf = "email.errors.required" class = "alert alert-danger"> 
       <span>Email is required</span> 
      </div> 
     </div> 
     <div class = "form-group"> 
      <label class = "control-label" for="password">Password</label> 
      <input class = "form-control" type="password" id="password" ngControl="password" #password="ngForm"> 
     </div> 
     <div *ngIf = "password.touched && password.errors"> 
      <div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger"> 
       <span>Password should contain 6 characters</span> 
      </div> 
      <div *ngIf = "password.errors.required" class = "alert alert-danger"> 
       <span>Password is required</span> 
      </div>   
     </div> 
    </form> 
</register> 

Dies ist meine Komponente, wo ich Validatoren umgesetzt haben:

import {Component} from '@angular/core'; 
import {Control, ControlGroup, FormBuilder, Validators} from '@angular/common'; 
import {CustomValidator} from './CustomValidator'; 

@Component({ 
    selector: 'register', 
    templateUrl: './app/authentication/register_validation/register.html', 
}) 

export class RegisterComponent{ 
    registrationForm: ControlGroup; 

    constructor(formBuilder:FormBuilder) 
    { 
     this.registrationForm = formBuilder.group({ 
      email: ['',Validators.compose([Validators.required, CustomValidator.underscore])], 
      password: ['',Validators.compose([Validators.required,Validators.minLength(6)])] 
     }); 
    } 

} 

In dieser Form email Feld funktioniert gut für beide Validatoren dh wenn ich nichts eintippe, gibt es "Email is required" Nachricht, wenn ich anfange, etwas zu tippen, gibt es "Underscore is required" Nachricht und wenn ich "_" eintippe alle Fehlermeldungen verschwindet. Wenn ich jedoch versuche, solche 2 Validatoren auf password Feld anzuwenden, funktioniert es nicht. Wenn ich kein Passwort eingib, gibt es eine Nachricht als "Password is required". Aber wenn ich etwas weniger als 6 Zeichen eintippe, erscheint die Nachricht minLength überhaupt nicht. Was ist falsch in diesem Code?

Answer 1

Die error key is minlength und nicht minLength:

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger"> 
    <span>Password should contain 6 characters</span> 
</div> 

Answer 2

Das ist mir wirklich so gut erwischt, wie ich den Schlüssel in meinem Markup abgestimmt, was ich in Code hatte, die nicht korrekt ist.

Beispielcode

password1: ['', [Validators.required, Validators.minLength(8)]],

Beispiel Markup

*ngIf="registrationRequest.get('password1').hasError('minlength')"

Hinweis im Code ist es minlength ganz in Kleinschreibung.