嵌套表格

有时需要嵌套表单以便在页面上逻辑地对控件和输入进行分组。但是，HTML5 表单不应嵌套。Angular 供应 ng-form 代替。

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

表单的每个部分都有助于整体表单的状态。因此，如果其中一个输入 myInput1 已被编辑并且是 $dirty，则其包含的形式也将是 $dirty。这与每个包含的形式级联，因此 myNestedForm 和 myForm 都将是 $dirty。