61

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?

8
  • Can you please create a plnkr.co with your code Jun 28, 2016 at 1:23
  • Also you are using lower version then RC3. which is deprecated. Try new RC3 version Jun 28, 2016 at 8:03
  • might refer this answer stackoverflow.com/a/38092249/5868331
    – mayur
    Jun 29, 2016 at 6:57
  • @mayur Yes. I did workaround by adding custom class for minLength but I wanted to use original validator. Anyways thanks :) Jun 29, 2016 at 9:44
  • Original validator means default angular 2 ????
    – mayur
    Jun 29, 2016 at 9:49

8 Answers 8

142

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>  
4
  • 3
    Your link is dead, but the solution still works. When you're still learning you'd think that Validators.maxLength would be checked by the identical key, especially since angular isn't afraid of camel casing everywhere else. But I guess it's mean to match HTML5 validators? Either way, thanks. Apr 9, 2017 at 15:59
  • 3
    The real question is why? I'm trying to add dynamic validations, so now I must call toLowerCase to get from the function to the error key? I hope it's at least consistent.
    – Greg
    Feb 8, 2018 at 0:22
  • 3
    Three years later, and this is still a common problem. Thanks for the help! Why would they use a lowercase L?
    – Justin C.
    May 16, 2020 at 0:28
  • 1
    This is still the same in Angular 10. I'm ok with it being in lowercase but still would like to know the rationale. Looks like this is not going to be changed anytime soon: github.com/angular/angular/issues/7407
    – Harlin
    Aug 23, 2020 at 17:16
39

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.

2
  • I forgot to add Validators.required. You saved a lot of my time. Thank you :)
    – Konrad
    Jan 8, 2020 at 16:40
  • this is rather frustrating. Thanks!
    – Jennifer S
    Aug 27, 2020 at 16:01
13

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>
1
  • Until you didn't point this explicitly I was looking for the solution for half an hour, this should be mentioned in the documentation of angular, I don't see the benefit of designing form validators like this. Dec 2, 2020 at 14:13
7

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.

3

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>
1
field: ['', Validators.compose([Validators.required, Validators.minLength(8)])]

This only works with multiple validators.

1

<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

1
  • I had the same issue and I used this syntax from above and it worked. However, there is a new requirement from Angular as below: <div *ngIf = "password.errors?.['minlength'] && !password.errors?.['required']" class = "alert alert-danger"> <span>Password should contain 6 characters</span> </div> This means it is optional to check errors on init. Without ?, we will have this error : Object is possibly 'null' and without [''] we have this Property '' comes from an index signature, so it must be accessed with [''].
    – Phoebe
    Aug 12, 2022 at 12:42
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.