form指令

概述

Angular JS的form指令提供表单相关的功能，它有两种形式：form和ng-form。
form和ng-form几乎是一模一样的，只有很小的一点区别：

form	ng-form
只有E模式	有EAC三种模式
只会判断和监测name属性	会判断和监测name和ng-form属性，悠闲name属性

实现细节

必要的时候监听submit事件

如果没有设置action属性时，form指令会监听submit事件，然后添加默认的响应。

if (!('action' in attr)) {
    var handleFormSubmission = function(event) {
        scope.$apply(function() {
            controller.$commitViewValue();
            controller.$setSubmitted();
        });

        event.preventDefault();
    };

    formElement[0].addEventListener('submit', handleFormSubmission);

    formElement.on('$destroy', function() {
        $timeout(function() {
          formElement[0].removeEventListener('submit', handleFormSubmission);
        }, 0, false);
    });
}

代码中最关键的是调用$commitViewValue和$setSubmitted函数，这两个函数实现了更新数据和设置已提交标识。这里的controller实际上是form指令的controller。
$commitViewValue只是调用子controller的$commitViewValue，form controller的子controller只有子form和ng-model的controller，所以最终调用的是ng-model的controller里的￥commitViewValue，具体将在ng-model指令里分析。
$setSubmitted功能更加简单，为form元素添加ng-submitted的css类，然后设置submitted标记为true，最后调用父form controller的$setSubmitted方法。

和父form建立关系

在form指令link的pre里，会把自己的controller添加到父form的controller里去，实现父子form的关联关系，如果没有父form，就什么也不做。
添加的过程：

form.$addControl = function(control) {
  // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
  // and not added to the scope.  Now we throw an error.
  assertNotHasOwnProperty(control.$name, 'input');
  controls.push(control);

  if (control.$name) {
    form[control.$name] = control;
  }

  control.$$parentForm = form;
};

其中control.$name为name或者ng-form属性的值，计算过程为：

form.$name = $interpolate(attrs.name || attrs.ngForm || '')($scope);

从这个添加过程可以看出，在父controller中会记录一个子controller列表，如果子controller设置了name属性，父controller还会添加对应名称的属性值（可以实现数据绑定，具体实现过程为：监测name属性，调用rename方法）。
同时在子controller中也会记录下父的form。这个过程是后续form指令各种操作的基础，他保证了表单操作时上下级的关联关系。

form controller中定义的方法

在form controller中定义了一些列的form操作方法，可以分为三大类：
1、controller关系操作，包括：$addControl，$removeControl，$$renameControl
2、controller对数据的操作，这个部分一般都是向下递归调用，最终调用ng-model中对应的函数，包括：$commitViewValue，$rollbackViewValue
3、form状态操作，这部分的方法一般都是递归调用，设置状态和css类，包括：$setPristine，$setUntouched，$setSubmitted，$setDirty。

form指令中支持的css类

在form指令中随着数据状态的变化，会自动的添加对应的css类，从而支持对于不同状态下的样式控制，其支持的css类有：

css类名	说明
ng-valid	全部数据都是有效的
ng-invalid	有无效的数据
ng-pending	表单处理中的状态
ng-pristine	数据是干净的，与dirty相对
ng-dirty	数据被修改过
ng-submitted	数据已经被提交过

代码样例

    




    userType: 
    Required!

    userType = {{userType}}

    myForm.input.$valid = {{myForm.input.$valid}}

    myForm.input.$error = {{myForm.input.$error}}

    myForm.$valid = {{myForm.$valid}}

    myForm.$error.required = {{!!myForm.$error.required}}

这段代码实现了form指令的基本功能，会判断表单输入项的合法性。如果输入为空，背景就会为红色。