怎么优雅的使用Angular表单验证

本篇内容主要讲解“怎么优雅的使用Angular表单验证”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么优雅的使用Angular表单验证”吧!

说到表单，我认为一个强大表单应该包含下面3部分功能

1. 收集用户输入的表单数据，在 Angular 中通过 ngModel 语法糖实现双向绑定非常方便；

2. 通过各种验证器验证表单元素输入的数据是否合法，Angular 内置了常用的验证器（required、pattern、email，min，max，minlength，maxlength）；

3. 验证后给予用户反馈，比如验证不通过给予错误的提示信息。

我觉得 Angular 的表单无疑是三大框架中最强大的，没有之一，而且是官方原生提供支持和维护，提到 Angular 的表单肯定要说下 Angular.js 的表单，其实 Angular 的表单基本上继承了 Angular.js 表单的所有功能，同时比 Angular.js 更强大，API 更友好。

那么 Angular 的表单和 Angular.js 相比到底有哪些改进呢

1. 自定义 ngModel

在 Angular.js 中 ng-model 只能用于 input，select 等内置的 HTML 表单元素，如果是一个自定义的 select 框(div)，可能就无法使用自带的 required 等验证器了

但是可以通过猥琐的方式处理，比如加一个隐藏的原生 HTML 表单元素，这个元素上绑定的 ng-model 和自定义的 select 框的 model 是一样的，然后通过这个隐藏元素是否验证通过去控制自定义 Select 的验证样式

那么在 Angular 中可以很方便让任何自定义的组件使用 ngModel 和 内置的验证器，只要你的自定义组件实现 ControlValueAccessor 接口，同时在组件的 providers 中加上 NG_VALUE_ACCESSOR 的 provider 即可，具体如何实现一个自定义的支持 ngModel 组件自行搜索下，官方文档好像没有找到相关介绍， 附一个 stackoverflow question

2. 结构型指令内部的表单元素自动识别

在 Angular.js 中如果有 ng-if 之类的动态指令，内部的表单元素不会自动追加到 Form 上，必须通过扩展一个自定义指令 ——dynamicFormControl —— 去手动追加到 ngForm 上，但是在 Angular 中不需要用户自己去处理，只要元素被渲染，会自动附加到 ngForm Controls 中。

3. 响应式表单

Angular 中除了模板驱动表单外，还新增了 Angular - 响应式表单，让用户多了一份选择，在某些复杂的场景下，响应式表单会更有优势。

4. 动态表单支持更好

在 Angular 中不管是模板驱动表单还是响应式表单，对于动态创建表单的支持都很好，可以轻松的通过 [attr.name]="formName" 和 [name]="formName" 实现动态表单元素的创建。如果有复杂的验证器，那么使用 响应式表单 会更好。

5. 模板驱动表单验证器支持属性绑定，动态控制是否需要验证

如果一个表单元素（比如说用户名）是否为必填不是确定的，而是动态设置的， 在 Angular 中可以通过属性绑定 ——[required]="isRequired"—— 非常方便的控制，我看了下 Angular.js 的源码现在也是支持的，不知道是我以前没有发现呢还是之后的版本加上的功能。

6. 支持异步验证器

如果要验证用户名输入是否已经存在，就需要请求 API 远程验证，那么这个验证就是一个异步的，如果验证器不支持异步就会导致验证结果没有返回的时候就直接提交表单了。如果支持异步会更加的完善。

当然 Angular 的表单不仅仅只有上述功能，通过我们最近一段时间的使用来看， Angular 表单基本已经完美了，但是

我们还需要让验证错误提示更加简单可扩展

回头再看下开头的介绍的表单应该包含下面3部分功能

1. 收集用户的输入的表单数据； 这个基本上 ngModel 双向绑定的语法糖已经简化的不能再简化了，当然使用响应式表单连 ngModel 也可以不写，这块已经不需要开发者做任何事情了；

2. 内置的验证器满足大部分场景，但是还是会有很多常用的验证器官方没有提供，比如 重复验证，远程唯一性验证等等，Nightapes/ngx-validators 和 gangachris/ng-validators 这2个第三方库扩展了很多，即使不满足自己扩展也很简单；

3. 验证后给予用户反馈，验证不通过给予错误的提示信息。对于这个错误提示信息，每个产品每个用户都会有不一样的需求，Angular 把可以做到的都做到了，都自动追加了 ng-invalid、ng-valid、ng-touched 等 class，还有就是哪些元素哪个验证器验证失败都可以从 ngModel 和 ngForm 方便的获取到，错误提示只能交给用户自己去处理，如果你的系统仅仅只有样式的反馈，那就更简单了。

对于验证错误提示，手动写错误提示的模版会很啰嗦，写模版本身也没什么，怕就怕哪天设计师改需求了，原有的提示方式换了一个新的方式，那整个系统都需要挨个替换，有追求的程序员最怕的就是做重复没有含量的工作，而且有时候还无法通过批量替换完成，所以在使用 Angular.js 1.x 的时候我就封装了一个表单验证库 why520crazy/angular-w5c-validator，刚开始发布的时候功能比较简单，后来有人提各种 Issue，逐渐改善，我觉得这个验证库对于很多人来说还是有帮助的，至少我觉得是更优雅的处理了各种错误提示，star 不多，但是证明了这个封装还是有一定价值的。

那么我们即使现在升级到了 Angular ，也面临着错误提示如何处理的问题，当然也有些类库处理了相关问题，但是好像都没有找到特别好用的。

1. UltimateAngular/ngx-errors 还是手写模版，只是简化了写法。

2. NG-ZORRO/ng-zorro-antd 组件库关于表单组件对错误验证提示也做了很多工作，但是还是需要手写模版配置。

既然没有相关的类库符合我们的需求，那么显然就需要自己造轮子，所以我们去年在升级 Angular 时就按照我们的方式在组件库的 Form 表单模块加上了和 Angular.js why520crazy/angular-w5c-validator 类似的组件，得益于 Angular 框架的优秀，造起轮子特别简单。

ngx-validator 已经可以开始使用了

所以这周我单独抽离了表单验证功能为一个独立的类库 why520crazy/ngx-validator , 如果你也在为表单验证错误提示苦恼，也在寻找一种更优雅的错误处理方式，希望我的这个库可以帮助到你或者给你一个启发。

到此，相信大家对“怎么优雅的使用Angular表单验证”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！