首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

自定义验证器不会调用Angular 2中的每个按键

自定义验证器是Angular 2中的一个功能,用于在表单验证过程中自定义验证规则。它可以用于验证用户输入的数据是否符合特定的要求。

在Angular 2中,自定义验证器不会调用每个按键。它主要用于在用户提交表单之前对表单数据进行验证,而不是在用户每次按下按键时进行验证。

自定义验证器可以通过创建一个函数来实现。这个函数接收一个控件作为参数,并返回一个验证结果对象。验证结果对象包含一个布尔值,表示验证是否通过,以及一个可选的错误消息。

下面是一个示例,展示了如何创建一个自定义验证器来验证一个输入字段的最小长度:

代码语言:typescript
复制
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function minLengthValidator(minLength: number): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    if (value && value.length < minLength) {
      return { 'minLength': { requiredLength: minLength, actualLength: value.length } };
    }
    return null;
  };
}

在上面的示例中,minLengthValidator 函数接收一个参数 minLength,表示最小长度。它返回一个验证函数,该函数接收一个控件作为参数,并在控件的值的长度小于最小长度时返回一个错误对象。

要在表单中使用自定义验证器,可以将其添加到表单控件的验证器数组中,如下所示:

代码语言:typescript
复制
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { minLengthValidator } from './validators';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myField">
      <div *ngIf="myForm.get('myField').errors?.minLength">
        Minimum length is {{ myForm.get('myField').errors.minLength.requiredLength }},
        actual length is {{ myForm.get('myField').errors.minLength.actualLength }}
      </div>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myField: new FormControl('', [Validators.required, minLengthValidator(5)])
    });
  }
}

在上面的示例中,我们使用 minLengthValidator 函数创建了一个自定义验证器,并将其添加到 myField 控件的验证器数组中。如果用户输入的值的长度小于 5,将显示一个错误消息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart Material Design 输入 顶

role - input元素role属性。 Inputs: characterCounter (String) → int  自定义字符计数功能。...如果没有输入文本,则必需输入将在第一次模糊时显示验证错误。 requiredErrorMsg String 自定义错误消息,以显示何时需要该字段并显示空白。...focus Stream  元素聚焦时事件。 inputKeyPress Stream  每当输入文本更改(每个按键)时发布事件。...focus Stream  元素聚焦时事件。 inputKeyPress Stream  每当输入文本更改(每个按键)时发布事件。...Accessor始终设置从输入设置原始String值,但仅在可以解析输入时设置Control值。 keypressUpdate属性在每个按键上都有值更新,而默认值是仅在模糊事件上更新值。

5.3K40

AngularDart 4.0 高级-管道 顶

这次Angular检测到列表引用已经改变。 它执行管道并用新列表更新显示,其中包括新飞行英雄。 如果您更改列表,则不会调用管道,并且不会更新显示; 如果您替换列表,管道将执行并更新显示。...Angular忽略(复合)对象内更改。 如果您更改输入月份,添加到输入列表或更新输入对象属性,它将不会调用纯管道。 这看起来很有限制,但速度也很快。...经常调用不纯管道,就像每次按键或鼠标移动一样。 考虑到这一点,谨慎使用不纯管道。 昂贵,长期运行管道可能会破坏用户体验。...请记住,每隔几毫秒就会调用不纯管道。 如果你不注意,这个管道将用请求折腾服务。 在以下代码中,管道只在请求URL发生更改和缓存服务响应时调用服务。...管道数据请求断点显示如下: 每个绑定都有自己管道实例。 每个管道实例都缓存自己URL和数据。 每个管道实例只调用一次服务

6.4K20
  • angular面试题及答案_angular面试

    :在angular初始化组件及其子组件视图之后调用,只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和子视图变更检测之后调用,只适用于组件 ngOnDestroy:...ngSwitch 自定义指令 3....在Angular中有三种方法可以做到这一点: Emulated : 样式从其他HTML传播到组件。 Native : 来自其他HTML样式不会传播到组件。...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务通讯非常便利。...强大功能比如动画和事件处理。 使用mvc模式。 支持双向数据绑定。 支持依赖注入, restful service和有效验证。 28. Angular核心部件有哪些?

    11.1K120

    前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一、验证 angularJS中提供了许多验证指令,可以轻松实现验证,只需要在表单元素上添加相应ng属性,常见的如下所示: 验证...语法格式如下: {{ express | filter:parameter1:p2:p3… | … | …}} 过滤器分了内置过滤器与自定义过滤器,过滤器调用方式也分了在模板中调用与在函数中调用。...3.5、自定义指令 内置指令就算再丰富也是有限,对于特殊需要可以选择自定义指令,自定义指令可以封装常用操作也便于分享与交流,自定义指令语法格式如下: module.directive('指令名称...@:使用@(@attribute)来进行单向文本(字符串)绑定 = :使用=(=attribute)进行双向绑定变量 & :使用&来调用父作用域中函数 3.5.1、第一个自定义指令 示例代码: <!

    15.4K60

    AngularDart4.0 指南-体系结构概述 顶

    组件类应该是精益。 他们不从服务获取数据,验证用户输入或直接登录到控制台。 他们将这些任务委托给服务。 一个组件工作是启用用户体验,仅此而已。...如果请求服务实例不在容器中,那么在将服务返回给Angular之前,注入将创建一个并将其添加到容器中。 当所有请求服务已经解析并返回时,Angular可以用这些服务作为参数调用组件构造函数。...但它并不包括你需要知道一切。 以下是其他重要Angular功能和服务简短字母顺序列表。 Forms:支持基于HTML验证和脏检查复杂数据录入方案。...HTTP:与服务通信以获取数据,保存数据并使用HTTP客户端调用服务端操作。 Lifecycle hooks:通过实现生命周期钩子接口,触及组件生命周期中关键时刻,从创建到销毁。...Router:在客户端应用程序中从一个页面到另一个页面进行导航,而不会离开浏览 Testing:为您应用编写组件测试和端到端测试。

    7.9K30

    Vue 2.0 学习总结,精华全在这里了

    js 虽然react中可以写css-in-js,但是缺乏选择功能,即便可以在js中引入css文件,但还是不方便 vue融合了react和angular优点,并且解决了react和angualr痛点...事件处理 在v-on:click时候想既传递参数又想传递事件对象,那么你需要手动传入$event参数 ? 常用事件修饰符 ? 常见按键修饰符 ?...通过全局 config.keyCodes自定义按键修饰符别名,记住要在new新实例之前注册 ?...组件 组件可以扩展 HTML 元素,封装可重用代码。在较高层面上,组件是自定义元素, Vue.js 编译为它添加特殊功能。...组件是类似于angualr中自定义指令,是vue中一种自定义标签 相当于react中通用组件,高可复用性(例如:列表,按钮,等待) 组件使用 全局注册组件 全局组件定义一定要在创建根实例之前

    4K110

    【17】进大厂必须掌握面试题-50个Angular面试

    支持验证 客户端和服务之间通讯便利 支持依赖注入 具有强大功能,例如事件处理程序,动画等。...Angular过滤器用于格式化表达式值,以便将其显示给用户。这些过滤器可以添加到模板,指令,控制或服务中。不仅如此,您还可以创建自己自定义过滤器。...在这里,每个视图都有自己 scope,因此由其视图控制设置变量将对其他控制隐藏。...Angular摘要周期是监视监视列表过程,以跟踪监视变量变化。在每个摘要循环中,Angular都会比较范围模型值先前版本和新版本。...W3C推荐标准规格 5.每个浏览都有自己实现 33.什么是AngularTranspiling? Angular编译是指将源代码从一种编程语言转换为另一种编程语言过程。

    41.4K51

    AngularJS简介

    ng-model指令把元素之(比如输入域值)绑定到应用程序。 ng-model 指令也可以:   为应用程序数据提供类型验证(number、email、required)。   ...ng-repeat 指令对于集合中(数组中)每个项会 克隆一次 HTML 元素。 HTML5允许扩展(自制)属性,以data-开头。...创建自定义指令 你可以使用 .directive 函数来添加自定义指令。 要调用自定义指令,HTML 元素上需要添加自定义指令名。...” }; }); 可以通过以下方式来调用指令:元素名、属性、类名、注释 restrict 属性设置指令只能通过某些方式来调用 var app = angular.module...Model(模型), 当前视图中可用数据。  Controller(控制), 即 JavaScript 函数,可以添加或修改属性。

    5K20

    Angular伪事件

    原文 - Angular Pseudo-Events 作者 - Shijir Tsogoo Angular 提供了一个巧妙小功能,用于简化监听键盘事件过程。...尽管在 Angular 模版绑定文档中提到了伪事件 pseudo-event,但是在其他地方没有进一步文档说明。深入之前,我们看看 Angular伪事件解决了什么问题。...然而,它们中有些是被抛弃或者浏览并不支持。并且,我们监听组合键越多,语法越复杂。 Angular 伪事件将解决上面的担忧。通过伪事件,Angular 允许你直接绑定指定按键或者按键组合。...比如,下面的案例将不会起作用,因为组合键只是由字母组成: 第二,非组合键必须放在组合键最后定义。...尽管符号键存在一些小缺点,但是 Angular 伪事件是一个非常棒功能,能够满足大多数监听键盘事件需求。我相信在任何 Angular 应用中使用它可以使实现键盘辅助功能和交互过程更加简单。

    26640

    AngularDart4.0 指南- 用户输入 顶

    ; } 当用户点击按钮时,Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...每次调用之后,onKey()方法将输入框值附加到组件values属性,后跟一个分隔符(|)。 该模板使用Angular插值({{...}})来显示值属性。...代码使用box变量来获取输入元素值,并在标签之间进行插值显示。 模板是完全独立。 它不绑定到组件,组件什么也不做。 在输入框中输入内容,然后观看每个按键显示更新。 ?...减少噪音一种方法是检查每个$ event.keyCode,并且只有当输入键是enter时才采取行动。 有一个更简单方法:绑定到Angularkeyup.enter伪事件。...然后,只有当用户按下Enter时,Angular才会调用事件处理程序。

    3.5K00

    JSON Web Token(JWT)教程:一个基于Laravel和AngularJS例子

    每个后续请求中,由于用户数据存储在服务上,服务需要找到该会话并对其进行反序列化。 基于服务认证缺点 难以扩展:服务需要为用户创建一个会话并将其保存在服务某个位置。...性能:没有服务端查找可以在每个请求上查找和反序列化会话。我们唯一要做就是计算HMAC SHA-256来验证token并解析其内容。....']; }); }); AngularJS前端示例 我们使用AngularJS作为前端,依赖Laravel后端身份验证服务API调用进行用户身份验证和样本数据以及用于提供跨域示例数据API...在进行AJAX调用时,要获得一些视觉反馈,我们将使用angular-loading-bar script来拦截XHR请求并创建一个加载栏。 ...包含对库引用,以及Angular模块,控制和服务自定义脚本。

    30.6K10

    Angular6自定义表单控件方式集成Editormd

    曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑玩,在网上也只找到一篇通过指令集成,虽然可以实现,但还是希望能做成组件形式,之后看到一篇自定义组件文章...ControlValueAccessor 这是自定义表单组件核心,只有继承这个接口,才有被 AngularformControl识别的资格。...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...注册自定义验证 其中useExisting用来设置验证函数,可自定义: const UEDITOR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR,...4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑,支持NgModel双向绑定

    5.2K20

    Angular 从入坑到挖坑 - 表单控件概览

    4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以在控件上添加上原生 HTML 表单验证来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...4.4、表单自定义数据验证 4.4.1、自定义验证 在很多情况下,原生验证规则无法满足我们需要,此时需要创建自定义验证来实现 对于响应式表单,我们可以定义一个方法,对控件数据进行校验,之后将方法作为参数添加到控件定义处即可...from '@angular/forms'; // 引入 Validators 验证 import { Validators } from '@angular/forms'; /** * 自定义验证方法...在模板驱动表单中,因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng...g directive direactives/hero-validate 在创建完成指令之后,我们需要将这个指令将该验证添加到已经存在验证集合中,同时为了使这个指令可以与 angular 表单集成在一起

    18.9K20

    达观数据对AngularJS技术思考与实践

    (filter)、服务和自定义服务(provider, factory,service)、指令和自定义指令(directive)、依赖注入(DI)、Angular继承。...控制接收到输入,它验证输入,然后执行修改数据模型状态业务操作。通常认为angular采用了MVC模型设计模式(也有争论认为MVW或MVVM),后面涉及到会较为详细解释。...但是需要注意,这种双向绑定仅限于angular上下文,如果你在AngularJS上下文之外任何地方修改了model,那么你就需要通过手动调用$apply()来通知AngularJS。例如: ?...目前单页面应用越来越受欢迎,而Angular在构建单页面应用上简直是标配。这样构建单页面应用特点是单页、无刷新式页面变化,每个页面包含不同数据。...1)作用域原型继承:原型继承时对变量赋值不会修改原型中值,而是直接在当前scope中创建一个同名属性;但如果是变量是对象,则不会创建。即基本类型会重新创建变量,引用则不会。 ?

    5.4K150

    Angular快速学习笔记(4) -- Observable与RxJS

    这个对象定义了一些回调函数来处理可观察对象可能会发来三种通知 通知类型 说明 next 必要。用来处理每个送达值。在开始执行后可能执行零次或多次。 error 可选。用来处理错误通知。...HTTP 模块使用可观察对象来处理 AJAX 请求和响应 路由和表单模块使用可观察对象来监听对用户输入事件响应 事件发送 EventEmitter Angular 提供了一个 EventEmitter...可观察对象不会修改服务响应(和在承诺上串联起来 .then() 调用一样)。...防抖(这样才能防止连续按键时每次按键都发起 API 请求,而应该等到按键出现停顿时才发起) 如果输入值没有变化,则不要发起请求(比如按某个字符,然后快速按退格)。...有一些关键不同点: 可观察对象是声明式,在被订阅之前,它不会开始执行,promise是在创建时就立即执行 可观察对象能提供多个值,promise只提供一个,这让可观察对象可用于随着时间推移获取多个值

    5.2K20

    2-进军 angular1.x 表达式和指令

    2-表达式和指令,数据绑定 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令,数据绑定 3-模型和作用域 scope 4-控制和过滤器 一 表达式 ng-init...tips 每个页面只有一个 ng-app 指令,多不起作用 1.ng-app是一个特殊指令,一个HTML文档只出现一次,如出现多次也只有第一个起作用;ng-app可以出现在html文档任何一个元素上...创建自己 指令 除了 AngularJS 内置指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义指令。...要调用自定义指令,HTML 元素上需要添加自定义指令名。...}; }); //restrict 值可以是以下几种: 复制代码 总结一下 angular 自定义几种写法 1、上面这种要清晰一下 // angular.module('MyApp',[]) //

    2.4K20

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    ,如果没有监视来监视这个属性,那个这个属性在不在 Scope 上是无关重要Angular不会遍历 Scope 上属性,它将遍历所有的观察。...每个监视函数是在每次 $digest 过程中被调用。因此,我们要注意观察数量以及每个监视函数或者监视表达式性能。 $digest循环是在什么时候以各种方式开始?...想象一下如果有个 alert 框显示错误给用户,然后有个第三方库进行一个网络调用然后失败了,如果不把它封装进 $apply 里面,Angular 永远不会知道失败了,alert 框就永远不会弹出来了。...angular 无法保证你绝对不会在一个 controller 里更改另一个 controller 生成 scope,包括 自定义指令(Directive)生成 scope 和 Angular 1.5...对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关操作(如指令作用域,控制绑定以及transclude等),最终返回每个指令链接函数,并将所有指令链接函数合成为一个处理后链接函数

    7.8K40

    10个小技巧助您写出高性能ASP.NET Core代码

    与谷歌一起构建gRPC是一种流行远程过程调用(RPC)框架。此版本ASP.NET Core在ASP.NET Core上引入了第一等gRPC支持。 Angular模板使用Angular 7....Angular SPA模板现在使用Angular 7,在第一次稳定释放之前,它将被Angular 8替换。 SPA-s身份验证。Microsoft通过此预览为单页应用程序添加了现成身份验证支持。...这并不意味着您执行时候不会请求服务,而是意味着您不会每次执行都请求服务。...缓存内容有助于我们再次减少服务调用,并帮助我们提高应用程序性能。我们可以在客户端缓存、服务端缓存或客户机/服务端缓存等位置任意点执行缓存。...确保此代码也是优化。这里有一些建议: 应该优化对每个请求执行自定义日志记录、身份验证或某些自定义处理程序代码。

    4.5K31

    angularjs学习第六天笔记(指令简介学习)

    谢谢   接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要模块:指令   今天主要先简单了解学习一下指令一些基本概念后使用 一、指令简介     指令其实就是angularjs...对html一个扩展,实现自定义html元素     angularjs其自身封装了一些常用系统指令,我们也可以根据需要自定义指令 二、自定义指令简介     自定义指令基本格式       app.directive...              在调用时,要将大写字母转换为小写并加上-               举例:myDirectiveTest  调用为:my-directive-test              ...--directive:my-directive-test-->         虽然提供了四种匹配方式,但是考虑到浏览兼容性问题,尽可能按照属性来匹配:A       一个简单练习: ' } }) 今天就到此为止,明天继续研究表单验证

    53820
    领券