Angular 2 form validation, minLength validator is not working
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?
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>
This really caught me out as well as I matched the key in my markup to what I had in code which is incorrect.
Sample Code
password1: ['', [Validators.required, Validators.minLength(8)]],
Sample Markup
*ngIf="registrationRequest.get('password1').hasError('minlength')"
Note in the code it's minlength
entirely in lower case.
I was facing the same issue but after so many research I got a solution with this:
Use minlength
instead of minLength
Here is the example:
<div *ngIf = "password.errors.minlength && !password.errors.required" class = "alert alert-danger">
<span>Password should contain 6 characters</span>
</div>
Instead of:
<div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger">
<span>Password should contain 6 characters</span>
</div>
I had the same problem where I wanted to validate a number field that contained the year, so I used Validators.maxLength(4)
to make sure someone does not accidently type 5 numbers for a year. Turns out when you set the input type to number:
<input type="number" formControlName='year'>
then maxLength does not "work" anymore. Which actually makes sense if you think about it for half a second.
So I changed my date input to:
year: [null, [Validators.required, Validators.min(1990), Validators.max(2050)]],
Which is the right approach when working with a number field.