问题标签 [angular-custom-validators]

表单包含电话号码输入和发送传真复选框字段。电话号码必须存在于用户目录列表中才能发送传真。点击保存按钮后需要进行表单验证。

1. 如果用户未选择发送传真选项并保存，则不需要电话号码验证。
2. 如果用户选择了发送传真选项并保存。然后使用 API 调用检查电话号码号码是否存在于目录列表中。如果电话号码不在目录列表中，则显示错误消息。

示例屏幕

是否可以为模板驱动的表单实现交叉提交的自定义异步验证器？

如果您对这篇文章有任何疑问，请随时向我提问。

app.component.html

app.component.ts

...

我正在尝试自定义验证器。html 表单 json 管道显示输出，但 mat 错误未显示输出。

我想在这样的自定义验证器中将变量作为参数传递

然后在我的自定义验证器中使用它

问题是它this.options总是空的。我将其初始化为[]，但当用户与表单（第一个字段）交互时，我将其更新为字符串数组，我认为自定义验证器不会重新检查this.options? 在这种情况下，如何在自定义验证器中传递变量？

我在材料对话框中有一个数据输入表单作为模板表单。我想将一些自定义验证器应用于它的一些输入字段。我没有成功让它们着火（尽管我测试了一个并且它适用于另一种“正常”形式）。尝试在弹出的材质对话框表单中使用它们是否有问题？是不是首发？

假设它没问题 - 为什么它不起作用？

谢谢。

模板的主要部分；

长话短说，我目前正在研究一个指令，该指令在修改时将函数应用于控制值。该功能仅在模型侧修改控制值。是这样的：

我遇到的问题是当我将验证器添加到这样的控件时：

如果我的 streetControl 控件值在视图中被修改，那么模型会使用该editValueOnTheFly方法进行编辑，该方法会在模型值中添加一个长字符串。这会触发验证并使控件无效，因为新模型值超过 10 个字符。

有什么方法可以对视图中显示的值（未修改）运行验证器？

我正在尝试使用 Angular 模式验证器来验证密码、邮政编码和电话号码。

出于某种原因，无论我尝试哪种正则表达式，密码和邮政编码验证似乎都不起作用。电话号码正则表达式工作得很好，这让我更加困惑。我不确定错误在哪里，因为即使是简单的正则表达式模式似乎也不起作用，这意味着错误在表单生成器中。但是，似乎我所做的与电话号码正则表达式没有什么不同。

提前致谢！

使用的正则表达式：

Formbuilder（简化为仅包含相关的表单控件）：

在我的反应式表单中，我为 3 个输入字段构建了自定义验证。验证的主要功能是在 3 个输入字段中有 1/2 有值时返回错误（我希望用户在 1 个字段中输入值后立即要求所有 3 个字段）。

这是我的验证器：

ngOnInit：

HTML：

我正在使用 Angular Material 来显示错误消息，但即使我的 console.logs 告诉我验证已应用，我似乎也无法在我的模板中显示消息。我已经尝试过 HTML 示例中的代码以及其他一些行，但它们要么已被弃用，要么无法正常工作。

我的问题是，如何在模板中显示错误？（注意：地址是一个嵌套的 formGroup ）

我有一个包含几个自定义表单组件的反应表单。我创建了这个组件以在多种表单中使用，并且我从 “ControlValueAccessor”接口继承，它运行良好，我查看每个自定义组件的值并查看表单和组件是否有效。但是我提交表单后无法显示验证错误消息。

例如，我有一个自动完成组件来显示办公室位置，通常当触摸此组件并且未选择位置时，您会看到有关用户必须选择位置的错误；但它不适用于表单提交。

这是组件的html：

这是父表单控件html：

和 ts 文件：

我想如果我将组件设置为已触摸（我相信这不是一个好的解决方案）它可能会起作用，但它也不起作用。

当我单击控件并且不选择城市时，效果很好。

当我单击下一步按钮提交表单时，未显示错误消息：

请问有什么想法吗？

内部服务-

内部组件-

里面的html-

当我开始在输入字段中输入任何内容时，它会显示"Cannot read property 'existingUserId' of null"。

我已经按照各种不同的方式来执行这个异步验证。但就我而言，那些从未奏效！我不知道我在哪里犯错误！谁能帮我这个？

我有一个带有自定义 aync 验证器的角度表单，如果表单在加载时无效，我想做一些事情。

这是代码

一旦我更改表单中的任何内容然后事件发出并且一切正常但我真的想知道表单在加载时无效，则 statusChange 事件在加载时永远不会发出值。

我尝试运行updateValueAndValidity()但它总是挂在PENDING状态。

stackbliz 链接：https ://stackblitz.com/edit/angular-async-custom-validation-vlz43u?file=src%2Fapp%2Fapp.component.ts