Angular 2 form validation, minLength validator is not working - validation

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>

Answer 2

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.

Answer 3

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>

Answer 4

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.

Answer 5

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>

Answer 6

field: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
This only works with multiple validators.

Answer 7

<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

Answer 8

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