Angular 2 表单验证，minLength 验证器不起作用

Posted 2023-02-22

【中文标题】Angular 2 表单验证，minLength 验证器不起作用

【英文标题】：Angular 2 form validation, minLength validator is not working

【发布时间】：2016-10-30 02:17:07

【问题描述】：

我有以下 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" 消息，当我输入 @987654328 时@所有错误信息消失。但是，当我尝试在 password 字段上应用这样的 2 个验证器时，它不起作用。当我不输入密码时，它会给出"Password is required" 的消息。但是当我输入少于 6 个字符的内容时，minLength 消息根本不会出现。这段代码有什么问题？

【问题讨论】：

你能用你的代码创建一个plnkr.co

另外，您使用的版本低于 RC3。已弃用。尝试新的 RC3 版本

可能会参考这个答案***.com/a/38092249/5868331

@mayur 是的。我通过为 minLength 添加自定义类来解决问题，但我想使用原始验证器。无论如何谢谢:)

原始验证器表示默认角度 2 ????

【参考方案1】：

error key is minlength 而不是minLength：

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

【讨论】：

您的链接已失效，但解决方案仍然有效。当您仍在学习时，您会认为 Validators.maxLength 将通过相同的键进行检查，特别是因为 angular 不怕其他地方的骆驼外壳。但我想这意味着匹配 HTML5 验证器？不管怎样，谢谢。

真正的问题是为什么？我正在尝试添加动态验证，所以现在我必须调用 toLowerCase 从函数获取错误键？我希望它至少是一致的。

三年后，这仍然是一个普遍的问题。谢谢您的帮助！他们为什么要使用小写的 L？

这在 Angular 10 中仍然是一样的。我同意它是小写的，但仍然想知道其中的原理。看起来这不会很快改变：github.com/angular/angular/issues/7407

【参考方案2】：

这真的让我大吃一惊，因为我将标记中的键与我在不正确的代码中的键相匹配。

示例代码

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

示例标记

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

请注意代码中的 minlength 完全小写。

【讨论】：

我忘了添加Validators.required。你节省了我很多时间。谢谢你:)

这很令人沮丧。谢谢！

【参考方案3】：

我遇到了同样的问题，但经过大量研究后，我找到了解决方案： 使用minlength 而不是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>

【讨论】：

直到你没有明确指出这一点，我一直在寻找解决方案半小时，这应该在 angular 的文档中提到，我看不到像这样设计表单验证器的好处.

【参考方案4】：

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

这仅适用于多个验证器。

【参考方案5】：

这对我的密码验证很有用。

<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="register.password" #password="ngModel" minlength="6" required>

【参考方案6】：

我遇到了同样的问题，我想验证一个包含年份的数字字段，所以我使用Validators.maxLength(4) 来确保有人不会在一年内不小心输入 5 个数字。当您将输入类型设置为数字时结果：

<input type="number" formControlName='year'>

那么 maxLength 不再“工作”了。如果您考虑半秒钟，这实际上是有道理的。

所以我将日期输入更改为：

year: [null, [Validators.required, Validators.min(1990), Validators.max(2050)]],

在处理数字字段时哪种方法是正确的。

【参考方案7】：

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

minLength 必须是小写的 minlength

【参考方案8】：

这可能与此处提出的问题无关。但就我而言，这是由于 HTML 中定义的输入类型而发生的。

在我的例子中验证器是这样启动的：

    this.OTPForm = this.fb.group(
        otp: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(6)]]
    )

Validators.minLength 和 Validators.maxLength 在下面不起作用，因为输入类型是 number/non-string，因此这里无法真正检查长度。

    <input type="number" nz-input formControlName="otp" placeholder="Enter OTP" /> 

虽然在下面输入类型为“文本”的情况下，可以进行比较。所以Validators.minLength 和Validators.maxLength 在这里工作。

    <input type="text" nz-input formControlName="otp" placeholder="Enter OTP" />