Angular 2 form validation, minLength validator is not working
ValidationAngularAngular2 FormsValidation Problem Overview
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?
Validation Solutions
Solution 1 - Validation
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>
Solution 2 - Validation
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.
Solution 3 - Validation
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>
Solution 4 - Validation
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.
Solution 5 - Validation
This worked for me for password validation.
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="register.password" #password="ngModel" minlength="6" required>
Solution 6 - Validation
field: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
This only works with multiple validators.
Solution 7 - Validation
<div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger">
<span>Password should contain 6 characters</span>
</div>
minLength must be lowercase minlength
Solution 8 - Validation
This might not really be related to the question asked here. But in my case, it was happening due to the input type defined in the HTML.
Validator was initiated like this in my case:
this.OTPForm = this.fb.group({
otp: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(6)]]
})
Validators.minLength
and Validators.maxLength
won't work for below as the input type is number/non-string
hence the length cannot be really checked here.
<input type="number" nz-input formControlName="otp" placeholder="Enter OTP" />
While for below where the input type is stated as "text", the comparison can be done. And so the Validators.minLength
and Validators.maxLength
worked here.
<input type="text" nz-input formControlName="otp" placeholder="Enter OTP" />