问题标签 [angular2-form-validation]

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 回答
581 浏览

angular - 以反应形式 formgroup 设置动态 ValidationFn

我正在尝试创建一个非常通用\动态的反应表单,它可以为表单组使用自定义验证函数(比较 2 个日期)。该函数实际上可以是任何类型为 ValidatorFn 的验证函数:

这是根本问题:
我在一种配置文件中定义函数,并用它初始化反应表单(接收函数作为参数)并使用validationFn设置formGroup。这是功能:

现在,在“customize\generic\dynamically created”响应式表单启动中,我设置了函数(或一些函数):

对于“模糊”的代码,我很抱歉,但这是由于动态创建的表单。问题是如何使用 group:FormGroup 参数传递和执行函数?我倾向于认为我的函数定义\范围等有一些问题。在尝试调试函数时,我看不到函数体被触发。请支持。

0 投票
1 回答
330 浏览

angular - 具有不同验证的 Angular 反应式表单按钮

我正在考虑用反应形式做一个简单的形式。

我想我会遇到的问题是当我在表单上有两个按钮需要不同的验证时。

例如,Andy 向 Bobby 提交请求。然后 Bobby 通过单击批准来批准请求,或者通过单击拒绝来拒绝请求。

但是...拒绝将需要填写评论字段。在不向表单添加更多字段的情况下解决此问题的最佳方法是什么?

它还必须是动态的,需要对每个按钮进行验证的字段可能会发生变化,所以我不能只是将不同的代码烘焙到按钮上。

我希望这两个按钮都是可点击的,以便用户可以看到哪些验证得到满足或没有得到满足。

0 投票
0 回答
250 浏览

angular - 如何在 IONIC 3 的 ion-list 中验证动态离子输入

我有一个ion-listion-items里面有两个。在ion-items我有ion-input哪个将在单击添加按钮时动态添加。我想验证每个ion-input,下面是我的代码。

下面是我的验证码

所以正常的表单验证是有效的。但是,当我单击添加按钮时,会出现另外两个字段,并且由于相同 formControlName,它正在清除名字和电话字段中的值。并且所有 4 个字段都显示错误消息。

谁能帮助我如何验证这一点。

0 投票
1 回答
80 浏览

forms - 如何在使用非英语语言(如阿拉伯语)输入电子邮件输入字段时显示自定义错误消息

我们有一个支持两种语言(英语、阿拉伯语)的应用程序,在注册表中我们需要支持这两种语言。但仅对于电子邮件字段,我们需要显示错误消息使用英语输入电子邮件字段。我怎样才能做到这一点?任何解决方案都会对我们有帮助。谢谢你。

当用户在电子邮件字段中使用阿拉伯语时,如何显示错误消息仅使用英语作为电子邮件。

0 投票
1 回答
913 浏览

angular - Angular ValidatorFn returns, but does not block Form

I have build a Custom Validator for my Form, which returns expected ValidationErrors object.

I proved this with console.log line, this actually logs my object.

The Validator is attached besides a Validators.required in ngOnInit

Problem is: the required Validator works as intended, but my custom Validator just logs.

I have tried quite a lot, like using validators with array instead of Validators.compose, tweaked my Validator method to set control.setErrors(ret) some other things, nothing worked.

I feel like there is quite a simple solution, but I just can't find it...

EDIT 1: I created a stackblitz https://stackblitz.com/edit/angular-ysyb9i?file=src%2Fapp%2Fapp.component.html

Explanation: the input takes any strings, on deselect the validation kicks in. if Input is 'false' it should set input to invalid by returning const ret: ValidationErrors = { isValidDirectory: true };, any other string should be valid and it returns null.

Both results are logged on console, so you can check it. If input is invalid it should show a notification div below (not quite sure, just added it for this stackblitz to show)

0 投票
3 回答
1963 浏览

angular - 使用异步验证和 Ngrx 存储的反应式表单验证

我正在开发一个 Angular 8 应用程序。我想使用 NgRx 存储和使用自定义异步验证器的反应式表单来显示表单错误。

登录组件.ts

登录页面.effects.ts

这里的主要问题在于我的test方法。我希望在{ foo : true}错误字段上设置,但它永远不会发生。我在谷歌上搜索了很多,我发现的一个解决方案是在first()里面添加方法,pipe()以便我的 observable 完成。它起作用了,但只是第一次。另外,提交表单时从未调用过异步验证器。

我在互联网上找到的所有示例都是使用 Http 调用。我知道它在请求完成时完成了 observable 但在我的情况下,Http 调用正在我的内部处理login-page.effects.ts

有没有更好的方法呢?还是我需要一些我不熟悉的 RxJs 运算符?

0 投票
2 回答
2964 浏览

angular - Angular Reactive Forms - 在值更改时显示/隐藏表单字段后执行验证

我正在使用具有各种需要验证的字段的反应式表单。某些字段具有条件验证,只有在满足条件时才应检查。(即如果您对上述问题的回答是肯定的,请解释原因)

在最终看起来像这样的 HTML 中:

这样,除非满足条件,否则反应式表单不会验证该字段。

然后我检查 valueChanges 上的表单有效性,如下所示:

但是,验证发生角度绑定更新导致误报和否定之前。

.debounceTime(250)我可以通过在 observable 之后添加 a 来缓解竞争条件来轻松修复它valueChanges,但是添加手动延迟似乎是一种反模式。

有没有更好的方法来确保我们每次更新表单时都执行检查,但在 angular 更新布尔条件绑定之后执行检查?

0 投票
1 回答
208 浏览

angular - 在所有验证通过之前如何防止表单提交[Angular 7]

我是 Angular 的新手。我已经彻底阅读了这个这个这个问题,但是它们都不是我用的,因为它们正在使用jquery。我的表格是非常基本的注册表单,只有 4 个基本字段。用户名、密码、确认密码和邮政编码以及提交按钮。为了保持这篇文章干净并且涉及多个文件,我在 github 上上传了必要的文件。

  1. app.component.html
  2. app.component.ts
  3. app.module.ts

我正在分别处理验证passwordzipcode

  1. 验证器.ts

验证工作得很好。但问题是即使前端存在验证问题,表单仍然会被提交。这是我的截图。请给我一个解决方案或至少给我一些提示。

PS:我正在关注这个youtube 教程。

在此处输入图像描述

0 投票
2 回答
8723 浏览

angular - 如何以角度验证formarray?

我正在使用带有formarray的可编辑。我的模型:

所有书籍:

代码片段:

我必须验证书名,名称是必需的并且是唯一的。html片段:

在这个可编辑的表格中,每一行都是 formgroup。编辑名称列后,将保存该行。问题是如何验证?就我而言,一次只能保存一行。那么我应该验证所有表单数组还是只验证该表单数组中的一个表单组?如何?

0 投票
3 回答
6783 浏览

angular - 在Angular中提交表单操作后如何触发验证并获得验证结果?

我有这个表单组:

这个提交表单功能:

启动时我没有为表单设置验证,因为只有在我单击提交按钮后才会验证此表单。所以我使用该setValidators函数在 onSubmit 函数中设置验证。

但问题是:如何触发此验证并获得验证结果?