" />

Kulman 2 muodon validointi, minLength-validointi ei toimi

original title: "Angular 2 form validation, minLength validator is not working"


Translate

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?



Minulla on seuraava kulma 2 muoto:

Tämä on yhteenveto käännöksen jälkeen. Jos haluat tarkastella koko käännöstä, napsauta käännä-kuvaketta


Kaikki vastaukset
  • Translate

    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>  
    

  • Translate

    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.


  • Translate

    I was facing the same issue but after so many research I got a solution with this, Please use minlength insted 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> 
    

    Hope this will help someone, Thanks


  • Translate

    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>
    

  • Translate
    field: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
    

    This only works with multiple validators.