巢狀表格

有時需要巢狀表單以便在頁面上邏輯地對控制元件和輸入進行分組。但是，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。