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

2023-12-23

我有以下 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消息根本不出现。这段代码有什么问题?


The 错误关键是minlength https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts#L123并不是minLength:

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger">
  <span>Password should contain 6 characters</span>
</div>  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 表单验证,minLength 验证器不起作用 的相关文章

  • 无法绑定,因为它不是选择器组件的已知属性

    我想将变量从一个组件传递到另一个组件 并且我正在使用 input 这是我的父组件 Component selector aze templateUrl aze component html styleUrls aze component s
  • Angular firestore 查询 firestore 文档

    我有以下查询 selectedUser AngularFirestoreDocument
  • Angular 2将数组传递给路由器queryString

    我想传递一个数组ids 1 2 3 像这样的路由器查询字符串 http some url ids 1 ids 2 ids 3 但是当我尝试使用 const queryParams ids 1 2 3 this router navigate
  • Angular 2 Material 2 日期选择器日期格式

    我不知道如何更改材料2日期选择器的日期格式 我已阅读文档 但我不明白我实际上需要做什么 datepicker默认提供的输出日期格式为f e 6 9 2017 我想要实现的目标是将格式更改为类似的格式9 Jun 2017或任何其他 文档htt
  • 验证纬度和经度

    我想验证纬度和经度 现在 我只是检查该值是否不为空 但我想要进行验证以检查它是否是有效的纬度或经度 我怎么做 我的财产是这样的 public string Lat get return this lat set base Validatio
  • 原生元素聚焦功能不起作用

    我试图通过单击按钮自动聚焦在输入元素上 请参阅打字稿 ViewChild envFilter envFilter ElementRef onFilterSelect this envFilter nativeElement focus 在
  • Docker 绑定安装卷不会传播由角度“ngserve”执行监视的更改事件

    请按照下列步骤操作 定义 Dockerfile FROM node alpine RUN yarn global add angular cli RUN yarn global add node sass RUN mkdir volumes
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • 如何将窗口注入到服务中?

    我正在用 TypeScript 编写一个 Angular 2 服务 它将利用localstorage 我想注入对浏览器的引用window对象到我的服务中 因为我不想引用任何全局变量 例如 Angular 1 x window 我怎么做 这目
  • 可从 Angular2 中的

    使用 Angular 2 从按钮的 onclick 事件创建可观察对象的首选方法是什么 我不确定从组件代码中的 DOM 获取本机元素是否被认为是最佳实践 我该怎么做 或者是否还有其他我不知道的快捷方式 别想太多 ViewChild butt
  • 当应用程序位于前台时,Angular 8 firebase 推送通知不起作用

    我正在按照此文档在我的 Angular Web 应用程序上实现 FCM 当我发送通知时 当应用程序未处于活动状态时 它会成功接收 接收后台通知 但如果应用程序处于活动状态 我就不会收到通知 请按照下列步骤操作 https dev to ma
  • 类型错误:您在需要流的地方提供了无效的对象。您可以提供 Observable、Promise、Array 或 Iterable

    我在尝试着map来自服务调用但收到错误 看着subscribe 没有在 Angular 2 中定义吗 https stackoverflow com questions 41995647 subscribe is not defined i
  • 在转到另一个活动之前需要 editText 字段

    我有验证editText 如果editText字段为空 它应该会失败验证并阻止用户转到另一个字段Activity 因为需要一个值 怎么做 我知道这是一个基本问题 但我不知道如何做到这一点 My code btninsert Button f
  • 对一组复选框使用 HTML5“必需”属性?

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要
  • 重定向到 Angular2 中 @CanActivate 内的不同组件

    有什么方法可以重定向到 Angular2 中的 CanActivate 不同的组件吗 截至今天 使用最新的 angular router 3 0 0 rc 1 这里有一些关于如何通过以下方式做到这一点的参考 CanActivate路线守卫
  • 仅当表单已提交时才触发 jQuery 表单验证?

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交
  • TypeScript 编译速度极慢 > 12 秒

    只是把它放在那里看看其他人是否也遇到这个问题 我已经使用 webpack 作为我的构建工具 使用 typescript 构建了一个 Angular 2 应用程序 一切都运行良好 但是我注意到 typescript 编译超级超级慢 我现在只有
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • 如何在 Angular 4 项目中使用 ActiveXObject

    我正在尝试使用 ActiveXObject 如下所示 getActiveXObject pdfCtrl return new ActiveXObject pdfCtrl checkPDF let plugin null if this ge
  • 如何识别 WPF 文本框中的 ValidationError 工具提示位置

    我添加了一个箭头来指示工具提示中的文本框 当文本框远离屏幕边缘时 这非常有效 但是当它靠近屏幕边缘时 工具提示位置发生变化 箭头显示在左侧 Here is the Image Correct as expected since TextBo

随机推荐