问题标签 [angular2-form-validation]

我正在使用FormGroup、FormBuilder和Validators类来验证 Angular2 应用程序中的表单。

这就是我为电子邮件和密码验证定义所需验证规则的方式：-

该代码Validators.compose([Validators.required, Validators.email])检查电子邮件字段是否为空以及提供的字符串是否为有效电子邮件。

但是，我不知道如何在不同的情况下显示不同的验证消息。说

1. 如果电子邮件字段为空，我需要显示“请提供电子邮件地址”
2. 如果提供的电子邮件无效，那么我需要显示“提供的电子邮件不是有效的电子邮件”。

这是我在 html 中显示验证消息的方式：-

如何在不同的情况下显示不同的消息？

我正在使用FormGroup、FormBuilder和Validators类来验证 Angular2 应用程序中的表单。

这就是我为电子邮件和密码验证定义所需验证规则的方式：-

这是我的 html 脚本：-

问题 1： 当单个输入字段显示两条验证消息时，如何只显示一条验证消息？

检查下面给出的这张图片： -

当email字段内没有数据时，两个验证规则都令人满意：-

1. 该字段没有数据，因此需要数据。
2. 空数据不是有效的电子邮件，因此需要有效的电子邮件。

我只需要显示一条验证消息，而不是两条验证消息。如果未提供电子邮件，则应显示“您必须添加电子邮件”。当给出电子邮件并且它不是有效的电子邮件时，它只会显示“请提供有效的电子邮件”我该如何实现？

问题2： 如何仅在用户与表单交互时显示验证消息？

目前，即使页面第一次加载，验证消息也会加载。即使用户没有在字段中输入任何值或单击按钮，仍然会显示验证消息。只有当用户对表单执行任何操作时，才会显示验证消息。我怎样才能做到这一点？

我是 Angular v4 的新手。我必须对表单进行验证。表单结构是有两个复选框，如果我选择第一个复选框，然后该表单的多个字段可以使用验证进行编辑，并且取消选中这些字段会禁用，第二个复选框也适用于相同的行为。这是页面的快照

如果单击一般信息复选框，则左侧的所有字段都应可通过验证进行编辑，如果取消选中则禁用所有字段，并且与地址复选框相同，如果它检查所有字段应可通过验证进行编辑并且取消选中使其禁用。

谢谢..

我有一个包含两个字段的表单...一个是一组 3 个复选框（必须选择其中一个），另一个是作为文件的输入类型。（必须选择）。我正在为它们使用响应式表单自定义验证器，并且只有在向表单提供 poper 值之后，我才必须启用提交按钮。但是验证器似乎没有工作。

HTML页面：

零件 ：

验证器：

我假设对于 fileUpload 字段，创建的验证器在其结构中是错误的，因为没有 formcontrol 对象作为参数传递。但是对于复选框（selectTool）验证器的大概结构正确，它不起作用。请帮我找出我的错误。提前致谢。

我正在使用 mat-datepicker，用户可以手动输入日期。我希望能够做这样的事情来验证日期并确保它遵循 MM/DD/YYYY 的模式：

但是，当我执行上述操作时，它不起作用，因为 mat-datepicker 正在将任何带有数字的输入转换为 Date 对象。任何其他不是数字的输入都会将其转换为 null。

有没有办法可以使用模式验证手动输入的文本？

我正在使用 angular 4 形式，并且我有一些字段。名字、姓氏和公司对我来说真的很重要。我想强制用户填写这三个字段之一。我该怎么做？

这里是 .ts 代码：

一个html：

我正在使用以下内容。

1) 表单生成器

2) 表单控件

如果 formControls 输入、收音机等无效，我创建了一个错误摘要以显示表单提交时的所有错误。我想做的是当用户点击错误消息时，他们应该被带到无效的输入字段。

我知道我可以做到的几种方法是：

1. <a href="formControlElementID">Error message</a>

2. 创建一个函数来设置点击焦点

我知道这些可以工作，但如果存在，我正在寻找一个 Angular 特定的解决方案。我希望通过某种方式使用表单控件名称进行链接。

前任：

是否有内置的东西FormControl或 Angular 来链接到formControll输入元素？使用它似乎是多余的，<a href="id">因为它很可能与 the 同名formControl，并且它添加#id到 url 中，然后为路由添加更多工作。设置焦点的 javascript 方法有效，但代码更多。

基于这些，我假设现在必须有某种内置的方法来做到这一点。

更新

关于@Vegas 的回答。但是，这很好用，如果您使用的是表单组，则必须调用不同的模板变量名称，否则在将值传递给子组件以及 formControlName 时，它​​将尝试为两者传递模板变量。

不正确：

以及尝试使用 [inputName]=name 会导致同样的问题。

正确的：

这是一个关于 Angular 2+ 模板驱动表单验证的良好实践的问题。

当我有

我应该做

或者

?

页面https://sherweb.github.io/ngx-materialize/form-validation上的所有示例都禁用了提交按钮，直到表单有效。我想让它启用并在提交时显示验证错误（如果有）。

可能吗？

我正在使用 angular 6，我有一个表单和一个按钮。当我按下按钮时，应用程序会在表单上方显示表单数据，然后我调用form.reset(). 但是在表单重置后，输入字段变为红色，因为我在表单中设置了所需的字段。问题出在哪里？

应用程序.html

应用程序.ts