Angular 2 表单验证，minLength 验证器不起作用 [英] Angular 2 form validation, minLength validator is not working

查看：36
本文介绍了Angular 2 表单验证，minLength 验证器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 Angular 2 表单:

<注册><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 *ngIf = "email.touched && email.errors"><div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger"><span>需要下划线</span>

<div *ngIf = "email.errors.required" class = "alert alert-danger"><span>电子邮件是必需的</span>

<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 *ngIf = "password.touched && password.errors"><div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger"><span>密码应包含 6 个字符</span>

<div *ngIf = "password.errors.required" class = "alert alert-danger"><span>需要密码</span>

</表单>

这是我实现验证器的组件:

import {Component} from '@angular/core';从@angular/common"导入 {Control、ControlGroup、FormBuilder、Validators}；从'./CustomValidator'导入{CustomValidator}；@成分({选择器:'注册'，templateUrl: './app/authentication/register_validation/register.html',})导出类 RegisterComponent{注册表:ControlGroup；构造函数(formBuilder:FormBuilder){this.registrationForm = formBuilder.group({电子邮件:['',Validators.compose([Validators.required, CustomValidator.underscore])],密码:['',Validators.compose([Validators.required,Validators.minLength(6)])]});}}

在这种形式中，email 字段对两个验证器都可以正常工作，即当我不输入任何内容时，它会在我开始输入时显示 "Email is required" 消息某事，它给出 "Underscore is required" 消息，当我键入 "_" 时，所有错误消息都消失了.但是，当我尝试在 password 字段上应用这样的 2 个验证器时，它不起作用.当我不输入密码时，它会给出消息 "Password is required".但是当我输入少于 6 个字符的内容时，minLength 消息根本不会出现.这段代码有什么问题?

解决方案

错误键是 minlength 而不是 minLength:

<span>密码应包含 6 个字符</span>

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?

解决方案

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>

这篇关于Angular 2 表单验证，minLength 验证器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆