问题标签 [angular-custom-validators]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1223 浏览

angular - Angular Forms:如何避免多个 NgIf div 用于验证错误消息?

我想简化下面的代码:

它应该只有 1div *ngif并将错误消息作为值传递,而不是硬编码或使用ngFor?

非常感谢您对此的任何帮助。谢谢。

0 投票
2 回答
55 浏览

angular - 它有效,这是其他地方的错误。创建自定义验证器

我正在自定义我的表单并创建自己的验证器。但我做错了,因为它总是崩溃:

创建表单时,我崩溃了

如果我删除表单定义中的验证器,它就可以工作。

我在做什么错?

0 投票
3 回答
474 浏览

angular - 使用 Angular 自定义验证器确认密码

我有一个密码字段和一个确认密码字段,如果您从上到下填写表格,一切正常。但是,如果我输入密码/密码确认,然后返回更改密码字段,则确认字段保持“有效”,除非我再次更改它以触发自定义验证器再次“检查密码是否匹配”。

form.component.ts - 表单从 register.component.ts 得到它的“布局”。这样我就可以动态构建表单。

form.component.html

register.component.ts - 我不知道如何为确认密码字段传递自定义验证器,所以我只是传递了 Validators.required 但这只是在构建表单时被自定义验证器覆盖。

在此先感谢您的帮助。

0 投票
1 回答
3397 浏览

angular - 当构造时值更改时,表单卡在异步验证器的 PENDING 状态

当在表单组上使用带有异步验证器的反应式表单时,并且如果通过patchValue在构造函数中使用或更改表单组的值ngOnInit- 即使异步验证器 observable 完成,表单仍保持PENDING状态。

我在 Stackblitz 中创建一个SSCCE

在示例中,您会看到一个包含两个字段的简单表单,其中包含表单状态和验证器状态的指示。在代码中,ngOnInit我调用patchValue表单,导致表单进入PENDING状态,并调用异步验证器。

异步验证器没有做太多,它只是等待 1 秒然后返回一个null错误对象,基本上说表单是有效的。您可以在指示中看到验证已完成,但表单仍处于PENDING状态。

如果您在构造函数或ngOnInit(即对象构造)之外的任何时间触发字段值的更改 - 那么当验证器完成时表单会进入VALID状态。如果您将值更改包装在setTimeout.

难道我做错了什么?这是正常行为,还是 Angular 中的错误?

0 投票
1 回答
355 浏览

angular-reactive-forms - 使用 Reactive-Forms 时如何在 Angular-8 中分离“实现的条件验证服务/功能”

我已经在我的组件中实现了条件验证。我正在尝试将验证逻辑从我的组件分离到另一个组件/服务。

演示链接:http://StackBlitz%20https://stackblitz.com/edit/angular-amr86r

0 投票
2 回答
101 浏览

angular - 双击自动填充表单字段,但不符合所需的验证器?

我有以下表单组:

和下面的component.html

当双击城市或街道窗体控件时,将调用以下函数并使用用户数据自动填充输入:

但是,页面底部的确认按钮状态仍处于禁用状态([disabled]='!order.valid'),并且只有在我手动点击每个字段上的键时才会生效。

知道如何解决这个问题吗?

提前致谢。

0 投票
1 回答
46 浏览

angular - Angular 自定义验证器:

我目前使用的自定义验证器是:

描述:

我想在接受 GPA 的输入字段中添加自定义验证器,要求是:输入的值不能超过 400 或为空或 0 或 1

现在:我的自定义验证器适用于以下条件:验证 000 为无效,这是正确的 验证 0 或 1 或数字单个数字为无效,这是正确的

唯一的问题是它接受高于 400 的值

期待快速帮助。

0 投票
2 回答
159 浏览

angular - angular4材料表结果错误中的自定义验证器

我正在使用 angular4-material-table 。在那里我尝试添加自定义输入验证我已经创建了单独的验证器服务在那里我调用了自定义函数来根据 api 结果访问我的 api 它将抛出输入有效与否。

这是我的代码,任何人都可以建议我犯了什么错误,

这个返回错误:无法读取 api_call 的属性,即使我在构造函数中声明了它

另一种方式:

这种方式有效,但即使输入有效或无效,它总是会引发错误。我已经用控制台检查了输出,似乎从 api 得到的结果是完美的。谁能帮助我我的错误是什么。提前致谢。

可以在这里看到一个 stackblitz 示例。

0 投票
0 回答
211 浏览

android - 离子角度奇怪的问题 - 自定义表单验证器未在 android 上被调用

我正在开发 ionic 4 angular 移动应用程序。我面临一个奇怪的问题,其中自定义表单验证没有在 android 设备上被调用,而是被调用并按预期工作。

在详细介绍之后,如果输入类型是文本,那么它会导致问题,如果输入类型是密码,它就可以工作。

已确认以下几点

  • 控制台级别没有错误
  • 在 ios 设备上运行/使用 ionic serve 命令运行时相同的代码工作。

.ts 文件代码

.html 文件代码

验证功能码是

Package.json 是

如上所述,如果 type="password" 那么验证函数在所有 3 个平台(web、ios、android)上都被调用了这个问题的可能根本原因是什么?

0 投票
1 回答
79 浏览

angular - 单击时从角度组件实例化角度自定义指令

假设我有一个名为“my-custom-directive”的指令和一个名为“app.component”的组件我在 app.component 中有一个方法 - createDirective() 将在单击 app-component.html 中的按钮时调用我想用这个方法实例化 my-custom-directive。如何在 angular2 及以上版本中做到这一点?

我尝试使用 Renderer2 但无法从组件创建指令