Angular 2 form validation, minLength validator is not working

Question

I have following Angular 2 form:

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

This is my Component where I have implemented validators:

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 this form, email field is working fine for both validators i.e. when I do not type anything , it gives "Email is required" message, when I start typing something, it gives "Underscore is required" message and when I type "_" all error messages disappears. However, when I try to apply such 2 validators on password field, it's not working. When I do not type password it gives message as "Password is required". But when I type something less than 6 characters, minLength message doesn't appear at all. What is wrong in this code?

Answer 1

The error key is minlength and not minLength:

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