Подтвердить что ты не робот

Angular 2 проверка формы, проверка достоверности minLength не работает

У меня есть следующая форма Angular 2:

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

Это мой компонент, где я реализовал валидаторы:

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

}

В этой форме поле email отлично работает для обоих валидаторов, т.е. когда я ничего не набираю, он дает сообщение "Email is required", когда я начинаю вводить что-то, он дает сообщение "Underscore is required" и когда я набираю "_" все сообщения об ошибках исчезают. Однако, когда я пытаюсь применить такие 2 валидатора в поле password, он не работает. Когда я не набираю пароль, он выдает сообщение как "Password is required". Но когда я набираю что-то меньше 6 символов, сообщение minLength вообще не отображается. Что не так в этом коде?

4b9b3361

Ответ 1

Ключ имеет значение minlength, а не minlength:

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

Ответ 2

Это действительно уловило меня, а также я сопоставил ключ в моей разметке с тем, что у меня было в коде, который неверен.

Пример кода

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

Разметка образца

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

Обратите внимание на код it minlength полностью в нижнем регистре.

Ответ 3

Я столкнулся с той же проблемой, но после стольких исследований я нашел решение с этим, пожалуйста, используйте minlength insted из minLength. Вот пример.

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

Вместо

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

Надеюсь, это поможет кому-то, спасибо