开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

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

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

相关搜索:Angular 2-自定义表单验证器不工作 Angular 2.3.1异步自定义验证器promise不能解析 angular 4:自定义验证器不工作 Angular 4项目不能脱机工作 Angular 5 FormGroup验证器web服务结果未触发ngIF hasError Angular FormGroup验证器(不是formControl验证器)Angular FormGroup验证器不在FormControl上保留setError Angular空白验证器工作错误 Angular自定义验证器消息 Angular自定义验证器：

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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.9K2 0

Angular 表单3--响应式表单复杂验证

表单验证是前端开发中重要的并且常见的工作比如下面的表单包含三个字段：验证要求： name：必填 Category：必填，只能输入大小写，字符长度3到10 Price：必填，只能输入不超过...只包含一个收集表单错误信息的方法 import { FormControl, FormGroup, Validators } from "@angular/forms"; // 自定义验证器 import...Product Form // 注意 new ProductFormControl() 不是 new FormControl() export class ProductFormGroup extends FormGroup....forEach(m => messages.push(m))); return messages; } } 其中 limit.formvalidator.ts 封装了一个验证长度限制的自定义验证器.../core"; import { NgForm } from "@angular/forms"; import { Product } from ".

2.4K3 0

Angular2 ：从 beta 到 release4.0 版本升级总结

Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。...'; => import {FormGroup} from '@angular/forms'; // Control => FormControl import {Control} from 'angular2...4. 运行npm run build --prod命令失败原因：basically the problem is in AOT and Angular analyzer....在webstorm里，更改文件不能在浏览器中更新输出。原因：webstorm里面默认启用”safe write”，将保存先存到临时文件。...使用angular-cli后无法自定义webpack的alias, 导致文件引入路径很长，如../../../shared/。

8.1K0 0

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.8K5 0

Angular 2 + 折腾记：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

(),new FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段的值！.../core'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单的一些特性 import { Router...} from '@angular/router'; import { AccountService } from '../.....UserName': ['', Validators.compose([Validators.minLength(6)] // Validators可选参数 // 1. required ：必须验证的.../core'; import { Router, ActivatedRoute } from '@angular/router'; import { FormGroup, FormControl, Validators

3.8K2 0

Angular: 最佳实践

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

2.8K4 0

理论 | 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.2K1 0

Angular17 使用 ngx-formly 动态表单

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

4261 0

移除 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.4K1 0

Angular5.0.0新特性

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

1.7K1 0

当nz-checkbox-group多选框组遇上必选校验

当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group...，最开始用的是响应式表单的验证+响应式表单的验证，结果总是无法达到预期效果。...one').hasError('required')">通知范围必选问题.ts 这里仅列出关键代码部分 validateForm: FormGroup...结果发现初始时：1、false，2、false，3、oneOption中的值，4、false 选择一个选项后：1、true，2、false，3、oneOption中的值+选中的value，4、false...selectedOne: any = []; validateForm: FormGroup; oneOption: any; constructor( private fb: FormBuilder

4.3K2 0

为什么自定义函数效验器和页面加载成功事件不能放在一起

required:true, cardLength:true } }, //提示信息 messages:{ card:{ cardLength:"请输入16位到18位的数字" } } }); }); //自定义函数效验器和页面加载成功事件不能放在一起...,因为页面加载成功事件也是一个函数,两个函数不能相互嵌套 $.validator.addMethod("cardLength",function(val,ele,par){ if(par) { if(val.length

7156 0

Angular8稳定版修改概述

但这是如何工作的？基本上，Angular将使用polyfill构建其他文件，并且它们将注入nomodule 属性。...} 从现在开始，我们可以创建自定义构建器。...构建器。...阅读Angular Doc上有关服务工作者的更多信息。表单改进添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。...如果要触发一个表单组中所有控件的验证，这个方法将是非常有用的。

4.5K2 0

响应式网页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.8K3 0

Angular 动态表单

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

3.2K4 0

如何使用 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.9K1 0

（数据科学学习手札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.1K2 0

一个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.5K1 0

炫酷！纯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化改写，也是个非常有用的技巧！

9852 0

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

借助支持多播的可观察对象，你不必注册多个监听器，而是复用第一个（next）监听器，并且把值发送给各个订阅者。...const squaredNums = squareValues(nums); squaredNums.subscribe(x => console.log(x)); // Logs // 1 // 4...HTTP 模块使用可观察对象来处理 AJAX 请求和响应路由器和表单模块使用可观察对象来监听对用户输入事件的响应事件发送器 EventEmitter Angular 提供了一个 EventEmitter...为什么NG使用observable而不是Promise？可观察对象不会修改服务器的响应（和在承诺上串联起来的 .then() 调用一样）。...' }) export class MyComponent implements OnInit { nameChangeLog: string[] = []; heroForm: FormGroup

5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭