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

为什么Angular 4 FormGroup自定义验证器不能工作?

Angular 4中的FormGroup自定义验证器无法工作可能有以下几个原因:

  1. 验证器函数没有正确绑定到FormGroup:在Angular中,自定义验证器函数需要正确绑定到FormGroup。确保在FormGroup中使用的验证器函数前面添加this关键字,以确保它们正确绑定。
  2. 验证器函数没有正确返回验证结果:自定义验证器函数应该返回一个对象,其中包含验证失败的信息。如果验证通过,应该返回null。确保验证器函数正确返回这些值。
  3. 验证器函数没有正确添加到FormGroup:在创建FormGroup时,需要将自定义验证器函数作为第二个参数传递给FormGroup构造函数。确保将验证器函数正确添加到FormGroup中。
  4. 表单控件没有正确绑定到FormGroup:确保表单控件正确绑定到FormGroup中。可以通过在表单控件的HTML标记中使用formControlName指令来实现。
  5. 表单控件的值没有正确更新:如果表单控件的值在验证器函数执行之前没有正确更新,验证器函数可能无法正确工作。确保在调用验证器函数之前,表单控件的值已经更新。

如果以上解决方法都无效,可能需要进一步检查代码逻辑、验证器函数的实现以及表单控件的绑定情况。如果问题仍然存在,可以提供更多的代码和错误信息,以便更好地帮助解决问题。

关于Angular 4的FormGroup自定义验证器的更多信息和示例,可以参考腾讯云的Angular文档:Angular - FormGroup自定义验证器

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

相关·内容

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

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

18.9K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4.内置验证 min 此验证要求控件的值大于或等于指定的数字...max 此验证要求控件的值小于等于指定的数字 required 此验证要求控件具有非空值 requiredTrue 此验证要求控件的值为真 email 此验证要求控件的值能通过 email...元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle 6.属性型指令 6.1创建 6.2引入 6.3编写 7.自定义指令

2.8K50

Angular: 最佳实践

官网解释了如何使用 TS 编译组合类型以轻松工作。这在处理来自 RESTful API 数据的时非常有用。...在应用程序的 tsconfig.json 文件中,我们可以设置这个标志,告诉编辑在未明确类型时候抛出错误。否则,编辑坚定它无法推断变量的类型,而认为是 any 类型。...组件 Component 组件是 Angular 的核心特性,如果你设法让它们被组织得井井有条,你可以认为你工作已经完成了一半。 考虑拥有一个或者几个基本组件类。...& (this.submitted || this.form.controls[fieldName].touched); } } 复制代码 现在,我们有了个不错的模版,甚至可以轻松地测试我们的验证是否与单元测试一起正常工作...读者可能意识到我并没有写关于 Directives 和 Pipes 的相关内容,那是因为我想写篇详细的文章,关于 Angular 中 DOM 是怎么工作的。

2.8K40

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

最后会看看刚刚发布的 Angular 4 的新特性给响应式编程带来了什么新鲜的元素。...为什么这么说呢?让我们先来看一个小例子,比如我们有这样一个需求,在生日的控件之前添加一个年龄的选择,用以辅助生日的输入。...Angular 中处理响应式表单只有 3 个步骤: 1、在组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...这就需要一个滤波的处理 .debounceTime(500),我们不去处理 500 毫秒内的变化,而是等待其输入停顿时再发送数据。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。

5.2K10

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式的动态表单框架,不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用的内置表单主题...设置自定义主题文件 Yes # 3. 选择语言环境代码: zh_CN # 4....Validation 表单验证主要包括:Formly 内置验证自定义验证消息及自定义验证函数三大块,自定义验证消息和验证函数分别还可以正在全局注册和指定字段注册,在不同的场景可以考虑不同的自定义方式...-\u9fa5]+$/, }, } 为字段添加自定义验证消息: 到目前不通过验证的字段仅仅是通过边框颜色的改变的区分,现在就为字段添加自定义验证消息,自定义验证消息同时支持字符串和函数两种方式设置...label}仅支持录入中文`, }, }, } 为字段添加自定义验证函数: 接着为新注册用户表单添加新的字段:邮箱、身份证、手机号,分别非这三个字段自定义校验函数: 全局注册自定义校验函数,

41610

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

移除 View Engine,转而使用 Ivy 从去年开始,Angular 就开始默认使用新的渲染和编译工作管线 Ivy。...Webpack 5 模块捆绑现已实现生产就绪。 不再支持 IE11 浏览。 对于编译,新版本提供转换组件样式资源的支持能力。 对于语言服务,新版本仅在模板中提供 Angular 属性补全功能。...向 FormArray 与 FormGroup 中引入 emitevent 选项。也是一项重大变化。 向 routerLinkActiveOptions 中引入更多微调控件。...允许您自定义路由出口实施方法。 新版本增加对 TypeScript 4.2 的支持,但对 TypeScript 4.0 与 4.1 的支持功能将被移除。...在表单中,引入最小与最大值验证。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。

4.4K10

Angular5.0.0新特性

构建优化是包含在CLI里面的一个工具,通过对你的应用程序更加语义化的理解可以使得你的打包程序(bundle)更小。 构建优化有两个主要工作。...这些工作减少了生成的JavaScript bundles的大小,并增加了你的用户应用程序的启动速度。...3.编译改进   改进了Angular编译来支持增量编译,重新构建变得更快,特别是对生产环境的构建和AOT编译,增强的装饰可以通过更精细化的去除空格来减小产生的包....4.国际化号码、日期和货币管道   Angular5中已经建立了新的号码,日期和货币管道,增加了跨浏览的标准化实现,消除国际化在不同环境中的差异。...注入,这种注入不再里来与ReflectPolyfill,可以大幅减少应用程序体积 在4.x中,依赖注入一共有两种,即Injector的抽象类子类: 1.

1.7K10

响应式网页bootstrap

响应式网页设计 根据设备尺寸,自动调整布局,有bootstrap和foundation等 bootstrap没有自定义标签,主要通过css扩展class foundation不兼容旧版本的ie 网格系统...相当于C#UI里面的容器系统,bootstrap对css进行扩展,使用了类似less文件中的变量定义,sacc不仅增加了变量还多了继承、混合、嵌套等功能 布局中必须row包含col,不能单独col...bootstrap网格系统 col- 针对所有设备 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示...which is width: 100% until the specified breakpoint bootstrap插件 bootstrap3支持字体图标Glyphicons,bootstrap4不支持...示例 用户名 </FormGroup

6.8K30

Angular 动态表单

还要验证。让本就枯燥繁琐的开发更显无趣。 动态表单功能: 不限布局。不限个数。(也可以理解为,一个表单折分成多个表单,数量和位置都不限) 左右表单。上下表单。上中下,左右,下下左右。等等。。。。。。... 表单4<...必要字段验证。还要处理错误消息 聚焦。(上一项输入完成,想直接聚焦下一项) 把表单当成一个表单元素使用。...dynamic-form> image.png 怎么使用: 在要使用的模块里,导入 DynamicFormModule image.png 导入 ControlService image.png 实例化控件,生成FormGroup...(有多个表单时(主表单+多子表单)只有主表单才生成FormGroup,子表单直接传options) image.png 支持自定义模板,支持排序(order)。

3.2K40

如何使用 React 构建自定义日期选择(3)

本文作者:IMWeb howenhuo 原文出处:IMWeb社区 未经同意,禁止转载 接着上一篇:如何使用 React 构建自定义日期选择(2) Datepicker 组件 构建 Datepicker...渲染 datepicker 此时,值得一提的是,Bootstrap Dropdown 组件将用于模拟自定义日期选择的下拉效果。这就是为什么 Reactstrap 包被添加为此项目的依赖项的原因。...2000-08-15" /> ); } } export default App; 如果您按照本文和代码片段进行操作,则应该在 React 应用程序中渲染出一个可用的自定义日期选择...虽然本教程中创建的自定义日期选择能按预期工作,但它并不能完全满足日期选择元素的所有要求。...通过 props 实现 max 和 min 日期 将输入类型从 “text” 切换到 “date” 更好的可访问性改进 你可以在 react-datepicker-demo 的 GitHub 上获得这个自定义日期选择的更多改进版本的完整源代码

7.9K10

(数据科学学习手札113)Python+Dash快速web应用开发——表单控件篇(下)

dbc.FormText()可以在表单控件之后为其添加格式美观的说明文字; dbc.FormFeedback() dbc.FormFeedback()的作用比较有意思,它可以帮助我们简化对表单控件输入内容的验证过程..._': app.run_server(debug=True)   效果如下,通过InputGroupAddon()可以很方便地为输入控件添加前缀或后缀说明: 3 动手写一个英雄联盟英雄资料查看!...有了今天的知识内容基础,加上之前教程内容的铺垫,我们可以开始用Dash书写一些形式更加丰富多样的web应用,比如一个在线英雄联盟英雄资料查看,后台通过爬取LOL官网的实时数据,实现全英雄资料查询,先来一睹效果如何吧...()轻松搭建出界面上方的三个控件;   3.编写回调,基于用户选择内容,以及查询按钮的点击情况,来异步渲染出下方Tabs()+Tab()区域内容,其中大量使用到列表推导非常的方便;   4.最后皮肤一览区域的轮播图片结合了...filename=trybs4_carousel#demo的例子进行了Dash化改写,也是个非常有用的技巧!

1.1K20

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

如果您对我们为什么这么做感到好奇,可以在Angular的文档中阅读它。...文本中有一个我们字段的名称,一个空字符串是初始值,Validators.compose显然允许我们将多个验证合并到一个字段中。我们使用.value并.setValue('')获得我们领域的价值。...为什么这样?我们正在从Firebase获得观察结果。但是,我们*ngFor在CardList组件中等待对象数组,不能观察这些数组。...], bootstrap: [AppComponent] }) export class AppModule { } 在这里,我们仍然定义EffectsModule.forRoot或者不能在我们加载的模块中工作...如果您想采取更先进的措施,请尝试使用Angular 4 Forms:由Toptaler Igor Geshoki进行嵌套和输入验证。 理解基础知识 我们为什么要使用Angular

42.5K10

炫酷!纯Python开发LOL英雄信息查询平台

dbc.FormText()可以在表单控件之后为其添加格式美观的说明文字; 「dbc.FormFeedback()」 dbc.FormFeedback()的作用比较有意思,它可以帮助我们简化对表单控件输入内容的验证过程...name__ == '__main__': app.run_server(debug=True) 效果如下,通过InputGroupAddon()可以很方便地为输入控件添加前缀或后缀说明: 图4...3 动手写一个英雄联盟英雄资料查看!...有了今天的知识内容基础,加上之前教程内容的铺垫,我们可以开始用Dash书写一些形式更加丰富多样的web应用,比如一个「在线英雄联盟英雄资料查看」,后台通过爬取LOL官网的实时数据,实现全英雄资料查询,...filename=trybs4_carousel#demo的例子进行了Dash化改写,也是个非常有用的技巧!

98420
领券