简单的表单

控件 (input, select, textarea) 是用户输入数据的方式。一个表单就是多个控件的集合，用来组织相关的控件。

表单和控件提供验证服务，这样一来用户就能在输入信息有误的时候得到提示。这提升了用户体验，因为我们在第一时间告知用户什么地方出错了、如何修正错误。记住，尽管客户端（浏览器）验证在用户体验方面起了重要作用，但是，它很容易被绕过，因此是不能信任的。为了应用的安全，服务端的验证仍然是必须的。

理解双向绑定的关键指令是ngModel. 指令ngModel通过保持数据与视图的同步，和视图与数据的同步实现了双向绑定。额外的，它提供了API来让其他指令扩展其行为。

Source

Demo

其中 novalidate 是用来禁用浏览器中自带的验证功能。

使用 CSS 类

为了允许对表单和控件自定义样式， ngModel 增加了如下的CSS类： - ng-valid - ng-invalid - ng-pristine - ng-dirty

接下来的例子使用了CSS来展示每一个表单控件的是否有效。在例子中，user.name 和 user.email 两者都是必须的，但是仅仅只在它们成为脏数据(dirty)时才会显示红色背景。这保证了用户不会因为还没有与控件进行交互，而恰好控件当前的状态，不符合验证条件的时候，出现不恰当的错误提示。

Source

Demo

与表单绑定和控制状态

一个表单是一个 FormController 实例。这个表单实例可以通过 'name' 属性装载到scope中去。

类似的，一个拥有 api/ng.directive:ngModel 指令的输入控件，包含一个NgModelController实例。这样一个控件的实例可以使用 'name' 属性装载到表单实例中去，作为表单实例的一个字段。name属性指定了其在表单实例中的字段名。

这意味着，视图中使用基本的数据绑定形式可以访问到表单和控件中的内部状态。

这让我们可以为上面的例子扩展以下功能：

RESET按钮只在表单有改变的时候才可用
SAVE按钮只在表单有改变且数据有效的时候才可用
为 user.email 和 user.agree 自定义错误提示信息

Source

Demo

自定义验证

Angular提供了一些常用的html5输入控件的验证实现：(text, number, url, email, radio, checkbox), 以及一些用于验证的指令 (required, pattern, minlength, maxlength, min, max).

定义你自己的验证器可以首先定义一个指令，这个指令要为 'ngModel' controller. 添加自定义验证方法。我们通过指定一个依赖来获得对这个控制器的引用，从下面的例子中可以看出。

我们的验证在两个地方触发：

数据到视图的更新 - 任何时候，受约束的模型改变时，所有在NgModelController#$formatters数组中的方法会被管式调用（一个接一个的调用方法），这样一来，所有的方法都有机会对值来进行格式化并改变表单和控件的有效性状态，通过NgModelController#$setValidity来实现。
视图到数据的更新 - 相似的，当用户与一个控件交互时，调用NgModelController#$setViewValue. 这又反过来管式调用了所有在NgModelController#$parsers数组中的方法，这样一来，所有的方法都有机会对值来进行转换并改变表单和控件的有效性状态，通过NgModelController#$setValidity来实现。

下面的示例中我们创建了两个指令。

第一个指令是 'integer' 整形数字，它验证了输入是否是一个合法的整形数字。例如，'1.23'是一个非法值，因为它包含小数部分。记住我们并没有对数组进行压栈操作，而是插入数组的开头。这是因为我们希望指令能成为第一个解析和处理被控制的值，而不希望在我们执行验证前，值已经被其他环节转换成了数字。
第二个指令时 'smart-float' 智能浮点数。它能解析 '1.2' 和 '1,2' 并将其转换成合法的浮点数 '1.2'. 记住我们此时不能在HTML5的浏览器中使用 'number' 类型，因为在这种情况下，浏览器不会允许用户输入像 '1,2' 这种被认为是不合法的数字。

Source

Demo

实现自定义form控件(使用 'ngModel')

Angular实现了所有基本的HTML表单控件((input, select, textarea),在绝大多数情况下能够很高效。然而，如果你需要更多的灵活性，你可以使用指令来实现你的自定义表单控件。

为了能让自定义控件能够与'ngModel'正常工作，达到双向绑定的效果，它需要：

实现 '$render' 方法，它是负责在数据传递给方法NgModelController#$formatters执行之后渲染数据。
调用 '$setViewValue' 方法，在任何用户与控件交互后，模型需要更新的时候。这通常在一个DOM事件监听器里完成。

查看 $compileProvider.directive 获得更多的信息。

接下来的例子展示了如何为一个可编辑元素添加双向绑定。