web-dev-qa-db-fra.com

Angular 2 validation du formulaire, le validateur minLength ne fonctionne pas

J'ai suivant Angular 2 forme:

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

Ceci est mon composant où j'ai implémenté des validateurs:

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)])]
        });
    }

}

Sous cette forme, le champ email fonctionne correctement pour les deux validateurs, c'est-à-dire que lorsque je ne tape rien, il donne le message "Email is required", Lorsque je commence à taper quelque chose, il donne le message "Underscore is required" et quand je tape "_" tous les messages d'erreur disparaissent. Cependant, lorsque j'essaie d'appliquer ces 2 validateurs sur le champ password, cela ne fonctionne pas. Quand je ne tape pas mot de passe, le message est le suivant: "Password is required". Mais lorsque je tape quelque chose de moins de 6 caractères, le message minLength n'apparaît pas du tout. Quel est le problème dans ce code?

validationangularangular2-forms
30
Nilakshi Naphade

Le la clé d'erreur est minlength et non minLength:

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger">
  <span>Password should contain 6 characters</span>
</div>
70
cexbrayat

Cela m’a vraiment surpris et j’ai fait correspondre la clé de mon balisage avec ce que j’avais dans le code, ce qui est incorrect.

exemple de code

password1: ['', [Validators.required, Validators.minLength(8)]],

Exemple de marquage

*ngIf="registrationRequest.get('password1').hasError('minlength')"

Notez dans le code que minlength est entièrement en minuscule.

19
Remotec

Je faisais face au même problème, mais après tant de recherches, j’ai trouvé une solution. Veuillez utiliser minlength insted of minLength Voici l’exemple.

<div *ngIf = "password.errors.minlength && !password.errors.required" class = "alert alert-danger">
      <span>Password should contain 6 characters</span>
    </div>

Au lieu de

<div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger">
  <span>Password should contain 6 characters</span>
</div>

J'espère que cela aidera quelqu'un, merci

1
Narendra Solanki