第8章 Angular表达 01 模板驱动表单

模板驱动表单是什么？

在原生JS中，如果要做一个表单的验证/校验，
客户端校验：

• 需要获取到这个需要验证的DOM元素，然后获取其value值，然后处理。
• 同样可以利用HTML5内置校验，这样做性能更好，但不支持自定义校验。
  Angular提供的模板驱动表单，就是一种建立在HTML内置校验基础上的 简单校验方式。

为什么说是简单校验？

HTML5的内置校验，就是为了提高性能，减少不必要重复工作而来。特点就是：不写一行脚本，也能进行用户数据(的客户端)校验。Angular模板驱动表单建立在这种基础上，所以提供了极为便利的校验手段。

两者怎么结合使用？

首先考虑这个问题，要验证表单元素，

• 要验证单个输入域，就要获取表单中内置HTML5验证对象的值，这个可以通过给表单添加 ngModel 这个directive来做到
  • 通过给每个表单域 添加一个ngModel，Angular后台为每个表单域创建了一个对应的控制对象，其中包含了(各类)验证信息(等。)，通过这个对象，就可以进行进一步验证。
• 要整体验证表单域(包裹多个独立表单域的form元素)，假设存在这样一个API，他集合了该form域内所有独立输入域的校验结果，并暴露一个反映集合内校验结果的值，当内部所有域都符合校验要求，这个值为true（表示成功），反之则为false。
  • 先不考虑这个API是什么，他应该是一个控制对象。
  • 这个控制对象类似独立表单域一样，需要添加directive
  • 不过，Angular自动给所有form元素添加了这个directive，叫ngForm。