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

Angular 8自定义验证器从不返回错误

是指在Angular 8中自定义表单验证器时,验证器函数不会返回错误。验证器函数是一个函数,它接收一个控件作为参数,并根据需要进行验证。如果验证通过,验证器函数应该返回null;如果验证不通过,验证器函数应该返回一个对象,该对象包含一个错误消息。

自定义验证器可以用于验证表单中的各种输入字段,例如文本框、下拉列表等。通过自定义验证器,我们可以根据业务需求定义特定的验证规则,以确保用户输入的数据符合预期。

在Angular 8中,我们可以通过创建一个验证器函数来实现自定义验证器。验证器函数可以在组件类中定义,也可以在单独的验证器文件中定义。以下是一个示例,演示了如何创建一个自定义验证器函数:

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

export function customValidator(control: AbstractControl): ValidationErrors | null {
  // 验证逻辑
  if (control.value === 'example') {
    return { customError: 'Invalid value' };
  }
  return null;
}

在上面的示例中,customValidator是一个自定义验证器函数,它接收一个AbstractControl对象作为参数,并根据需要进行验证。如果控件的值等于'example',则返回一个包含自定义错误消息的对象;否则返回null。

要在Angular 8中使用自定义验证器,我们需要将验证器函数应用于相应的表单控件。可以通过在模板中使用Validators.compose()方法将自定义验证器与其他内置验证器组合使用。以下是一个示例,演示了如何在模板中应用自定义验证器:

代码语言:txt
复制
<form [formGroup]="myForm">
  <input type="text" formControlName="myControl" />
  <div *ngIf="myForm.get('myControl').hasError('customError')">
    {{ myForm.get('myControl').getError('customError') }}
  </div>
</form>

在上面的示例中,myForm是一个FormGroup对象,myControl是一个FormControl对象,它们都需要在组件类中进行初始化。通过使用formControlName指令,我们将myControl与模板中的输入框关联起来。通过使用getError方法,我们可以获取自定义错误消息并在模板中显示。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的计算能力,满足各种业务需求。产品介绍链接
  • 腾讯云云数据库MySQL版:高性能、可扩展的关系型数据库服务。产品介绍链接
  • 腾讯云对象存储(COS):安全、稳定、低成本的云端存储服务。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。产品介绍链接

以上是关于Angular 8自定义验证器从不返回错误的完善且全面的答案。

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

相关·内容

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

4.4、表单的自定义数据验证 4.4.1、自定义验证 在很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义验证来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后将方法作为参数添加到控件定义处即可...from '@angular/forms'; // 引入 Validators 验证 import { Validators } from '@angular/forms'; /** * 自定义验证方法...,当数据有效时,返回 null,当数据无效时,则会返回一个对象信息,这里的 nameinvalid 就是我们在模板中获取到的错误信息的 key 值 ...g directive direactives/hero-validate 在创建完成指令之后,我们需要将这个指令将该验证添加到已经存在的验证集合中,同时为了使这个指令可以与 angular 表单集成在一起...对于模板驱动表单,同样是采用自定义指令的方式进行跨字段的交叉验证,与单个控件的验证不同,此时需要将指令添加到 form 标签上,然后使用模板引用变量来获取错误信息 import { Directive

18.9K20

angular面试题及答案_angular面试

在传统的web技术中,客户端请求一个web页面(HTML/JSP/asp),服务返回资源(或HTML页面),客户端再次请求另一个页面,服务器用另一个资源响应。...Authentication (认证) : 用户登录凭据传递给(服务上的)认证API。在服务验证凭据并返回JSON Web Token(JWT)。...一旦JWT返回给给客户端,客户端或用户将被该JWT所标记。 Authorization(授权):登录成功后,经过身份验证或真正的用户不能访问所有内容。...使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务的通讯非常便利。 强大的功能比如动画和事件处理。 使用mvc模式。 支持双向数据绑定。...支持依赖注入, restful service和有效验证。 28. Angular的核心部件有哪些?

10.9K120

angularjs 表单验证

二、表单中控制变量 屏蔽浏览对表单的默认验证行为 在表单元素上添加novalidate标记即可,问题是我们怎么知道我们的表单有哪些字段是有效的,那些事非法或者无效的?...错误 这是AngularJS提供的另外一个非常有用的属性:$error对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。...input.ng-invalid{ border: 1px solid red; } 四、自定义验证  但是,默认的验证指令不一定能够,完全满足我们的真实应用场景,ng同样提供的自定义验证指令的功能...这个方法会更新控制上本地的$viewValue,然后将值传递给每一个$parser函数(包括验证)。...由于返回值会被忽略,因此这些函数不需要返回值。  $error $error对象中保存着没有通过验证验证名称以及对应的错误信息。

6.6K70

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

一、验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: 验证...验证搜索框中的内容只能是字母与数字,不允许输入其它类型的字符。 练习2: 请自定义一个过滤器实现敏感关键字过滤,在过滤器中可以准备一个敏感词数组,将敏感词替换成指定的符号,默认为*号。...一个常见错误是在模板上再次使用ng-controller定义一个控制。这将引起控制被附加和执行两次。...3.5、自定义指令 内置的指令就算再丰富也是有限的,对于特殊的需要可以选择自定义指令,自定义指令可以封装常用操作也便于分享与交流,自定义指令的语法格式如下: module.directive('指令名称

15.4K60

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

JSON Web Token 的工作原理 浏览或移动客户端向包含用户登录信息的认证服务发出请求。认证服务生成新的JWT access token并将其返回给客户端。...然后,服务验证令牌,如果它有效,则将安全资源返回给客户机。 基于token认证的优点 无状态,易于扩展:token包含用于标识用户的所有信息,从而消除了对会话状态的需要(即,无需会话状态)。...模块,控制和服务的自定义脚本。...我们也可以使用拦截来创建一个全局的HTTP错误处理程序。这是我们的拦截的一个例子,它们在浏览的本地存储中可用时注入一个token。...它发出请求,并将成功和错误回调委托给控制

30.5K10

AngularDart4.0 指南- 表单 顶

开发表单需要设计技巧(超出本页面的范围),以及双向数据绑定,更改跟踪,验证错误处理的框架支持,您将在本页面上了解这些信息。 本页面向您展示了如何从头构建一个简单的表单。...向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量在HTML元素之间共享信息。 您可以在Plunker中运行实例(查看源代码)并从那里下载代码。...您可以创造性地设计控件,将它们绑定到数据,指定验证规则和显示验证错误,有条件地启用或禁用特定控件,触发内置的视觉反馈等等。 Angular通过许多重复的,模板化的任务使处理过程变得简单。...添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。 使用ngSubmit处理表单提交。 禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。...用于验证和表单元素更改跟踪的NgControl 指令。 输入控件(通过模板引用变量访问)的valid 属性,用于检查控件有效性以及显示/隐藏错误消息。

17.4K30

Angular 从入坑到挖坑 - HTTP 请求概览

而在组件处仅显示错误提示 在服务中定义一个错误处理,用来处理与后端请求中发生的错误 import { Injectable } from '@angular/core'; import { Observable...; } } 当请求发生错误时,通过在 HttpClient 方法返回的 Observable 对象中使用 pipe 管道将错误传递给自定义错误处理,从而完成捕获错误信息的后续操作 ?...,从而不需要在后续的业务逻辑代码中再进行判断请求是否成功 4.3.1、自定义拦截Angular 中可以新建一个继承于 HttpInterceptor 接口的拦截类,通过实现 intercept...,与其它的自定义服务一样,我们需要添加到根模块的 providers 中,因为可能会存在定义多个拦截的情况,这里可以通过定义一个 typescript 文件用来导出我们需要添加的拦截信息 因为会存在定义多个拦截的情况.../app.component'; // 添加自定义拦截 import { HttpInterceptorProviders } from '.

5.3K10

2018年前端面试总结

服务返回此响应(对 GET 或 HEAD请求的响应)时,会自动将请求者转到新位置。 302 (临时移动) 服务目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。...307 (临时重定向) 服务目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。 4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务的处理。...400 (错误请求) 服务不理解请求的语法。 401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务可能返回此响应。 403 (禁止) 服务拒绝请求。...简述vue、react、angular 一、Angular特性: 由自己实现一套模板编译规则,数据变化依赖脏检查, 基本属性包括:数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入...框架比较臃肿,每次用啥功能要引入一大堆东西 Angular错误提示不够清晰明显,对于初级开发者,很难看懂Angular错误提示。

71020

AngularDart Material Design 输入 顶

Inputs: characterCounter (String) → int  自定义字符计数功能。 键入输入文本; 返回文本应被视为多少个字符。...如果没有输入文本,则必需的输入将在第一次模糊时显示验证错误。 requiredErrorMsg String 自定义错误消息,以显示何时需要该字段并显示空白。...Inputs: characterCounter (String) → int  自定义字符计数功能。 键入输入文本; 返回文本应被视为多少个字符。...如果没有输入文本,则必需的输入将在第一次失去焦点时显示验证错误。 requiredErrorMsg String  自定义错误消息,以显示何时需要该字段并显示空白。...characterCounter Function  自定义字符计数功能。 输入输入文本; 返回文本应被视为多少个字符。 checkValid Function 已禁用!

5.3K40

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式的动态表单框架,不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用的内置表单主题...Validation 表单验证主要包括:Formly 内置验证自定义验证消息及自定义验证函数三大块,自定义验证消息和验证函数分别还可以正在全局注册和指定字段注册,在不同的场景可以考虑不同的自定义方式...: 到目前不通过验证的字段仅仅是通过边框颜色的改变的区分,现在就为字段添加自定义验证消息,自定义验证消息同时支持字符串和函数两种方式设置; 全局注册自定义验证消息,需要在 FormlyModule 注册时通过...label}仅支持录入中文`, }, }, } 为字段添加自定义验证函数: 接着为新注册用户表单添加新的字段:邮箱、身份证、手机号,分别非这三个字段自定义校验函数: 全局注册自定义校验函数,...\d{8}$/.test(c.value), message: (error: any, field: FormlyFieldConfig) => `${field.props

49810

给Java程序员的Angular快速指南 | 洞见

在 TypeScript 中,当你不声明函数的返回类型时,它会返回自动推断的类型(没有明确的 return value 语句时会推断为 undefined 类型),如果你不想返回任何值,那么请把返回类型指定为...像后端控制那样直接写在组件中?没问题! 像后端那样委托给服务?没问题! 像 Redux 那样委托给单一 Store?没问题! 像 Java 8 Stream 那样用流水线生成?没问题!...参见: https://angular.cn/guide/hierarchical-dependency-injection 表单与验证 在前端程序中,验证主要是为了用户友好性,而不是安全。...安全是后端的工作,不能因为前端做了验证而放松。 Angular 对表单提供了非常强力的支持。...当然,你也可以自定义这些名称来适配后端。

2.4K42

移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

默认情况下,CLI 将启用严格模式以捕捉开发早期的各种错误。 Webpack 5 模块捆绑现已实现生产就绪。 不再支持 IE11 浏览。 对于编译,新版本提供转换组件样式资源的支持能力。...APP-INITIALIZER 令牌的类型有所变更,旨在准确反映 Angular 处理的返回值类型。同样属于重大变化。...允许您自定义路由出口实施方法。 新版本增加对 TypeScript 4.2 的支持,但对 TypeScript 4.0 与 4.1 的支持功能将被移除。...在表单中,引入最小与最大值验证。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。...新版本还对大量 bug 做出修复,进一步完善了编译、compiler-cli、Bazel 构建工具、路由以及 Angular 内其他组件的运行质量。

4.4K10

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

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但还是希望能做成组件形式的,之后看到一篇自定义组件的文章...ControlValueAccessor 这是自定义表单组件的核心,只有继承这个接口,才有被 Angular的formControl识别的资格。...this.mdeditor.editor.remove(); this.mdeditor.destroy(); this.mdeditor = null; } } 添加自定义验证功能...注册自定义验证 其中useExisting用来设置验证函数,可自定义: const UEDITOR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR,...4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑,支持NgModel双向绑定

5.2K20
领券