类别:形式

昨天，我们看了如何写一个验证函数这适用于反应式。模板驱动的表单有一个有点类似的方法，它也使用验证器函数，但需要一个包装器指令来实现验证器像这样的接口(例子)：

编写响应式表单和模板驱动表单验证函数最简单的解决方案是为模板驱动表单验证创建一个指令，然后将验证函数作为该类的静态方法公开:

在这种情况下，静态方法有两个优点:

• 这是公共
• 它不需要类的实例(我们可以将其称为CreditCardValidator.validateCcNumber）

因此，我们会在模板驱动的表单中使用这样的验证特性:

就像反应式一样:

您可以检查完整的代码斯塔克布利茨的例子．这是另一个关于验证方法的更多信息．

让我们继续深入了解Angular的表单验证功能。到目前为止，我们已经看到了如何显示自定义反馈以用户为基础基本HTML验证特性．今天，让我们看看如何定制验证本身。

好消息是我们只需要一个函数。这个函数取aFormControl作为参数并返回零用户输入的值是否有效。如果值无效，则返回ValidationErrors对象，即我们想要的任何键/值对象。

这里有一个例子:

很简单，对吧?如果邮政编码错误，则返回一个带有自定义错误消息的对象。否则，返回零．

当然，我们可以通过为每种情况添加几个不同的检查和特定的错误消息来更精确地验证:

然后，为了让特定的输入使用该验证函数，我们可以将其作为参数传递给FormControl构造函数如下:

然后是这样FormControl在我们的HTML模板中绑定到正确的输入(这是响应式表单的方法-明天我们将介绍一个适用于模板驱动表单的方法)。属性的errors属性可以添加一些错误处理FormControl，它会有ValidationErrors从验证函数返回的对象:

现在我们的表单使用自定义验证函数提供自定义反馈:

的代码上面关于Stackblitz的例子。

昨天，我们看到了Angular使用六种不同的CSS类(实际上是8个，我没提ng-pending，这是执行异步验证时的临时状态，以及ng-submitted，它只应用于form元素)。

今天，让我们看看如何在CSS类之外定制显示给用户的反馈。Angular验证属性的好处在于，它们不仅可以作为CSS类使用。它们也可以作为公共属性在ngModel和ngForm表单中使用的指令。

我们可以使用模板引用变量访问这些指令的导出值如下:

上面的代码会产生如下的渲染:

当然，显示真正的或假不是很方便使用。相反，我们可以使用*ngIf，使体验更加精致:

看起来是这样的:

我们可以把同样的想法应用到形式元素，并决定禁用提交按钮，只要表单无效:

或者我们甚至可以隐藏按钮，只要表单是无效的:

你懂的。就像那些验证属性一样简单，它们支持许多可能不同的自定义，以向用户显示验证反馈和提示。

你可以在Stackblitz上玩我的代码示例．

在HTML表单中验证用户输入可能是一项乏味的任务。在这个新的系列中，我们将看看Angular如何帮助我们实现轻松的表单验证。

首先，有必要知道Angular主要依赖于使用现代HTML属性的本地浏览器验证特性。方法将表单字段标记为必需的要求HTML属性:

如果用户输入必须匹配特定格式，则可以使用模式属性，它使用正则表达式语法——这里是一个5位数字

其他可用的HTML验证属性是最小值，马克斯，最小长度，最大长度．您还可以将输入类型设置为比文本，例如电子邮件或电话获取额外的验证和功能。这是所有可能输入类型的列表．

一旦你使用这些属性指定了你的验证规则，Angular就会自动切换相应HTML元素上的一些CSS类:ng-valid当输入的值有效时，和ng-invalid输入的值无效时。

这意味着我们所要做的为用户提供视觉反馈的就是在我们的CSS样式表中实现这样的类:

上面的CSS类导致了表单输入的以下样式:

如果我们想要根据用户是否已经输入了一些东西来微调表单的呈现，Angular还添加了一些额外的类来实现这一目的:

• ng-pristine：真正的当用户没有更改元素值时
• ng-dirty:质朴的反义词真正的当用户更改了元素值时
• ng-touched：真正的当用户将焦点放在元素上(比如点击它)，然后从元素上移除焦点(点击离开它)
• ng-untouched:触点的反义词——意思是用户还没有把焦点放在元素上，或者还没有移去那个焦点。

使用这些类的组合功能非常强大。例如，下面是我们如何在用户“触碰”输入时添加错误样式:

这将导致以下默认呈现:

然后，一旦用户输入了一些内容，并从元素中删除了焦点:

您可以使用斯塔克布里茨回购的代码．明天，我们将看到如何使用这些验证属性来做更多的CSS样式。