在angularjs中验证嵌套形式

Question

我有一个主窗体，在其中有第二个用ng-form指令声明的窗体，如下所示：

<form name="settingsForm">
  <label for="firstNameEdit">First name:</label>
  <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />

  <ng-form name="addressForm">
   <label for="addressEdit">Address:</label>
   <input id="addressEdit" type="text" name="address" ng-  model="person.address" /><br />
   <label for="zipEdit">ZIP code:</label>
   <input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />

   <button>Save address</button>
  </ng-form>

  <button>Save</button>

</form>

当我点击“提交”按钮时，所有输入均得到验证，我想知道是否只能验证例如firstName而不验证ng-form，因为我希望ng-form提交时保存地址分开，而不保存。

Answer 1

首先，您需要禁用表单的默认验证，如Zohaib Ijaz所示。您可以利用$invalidAngularJS提供的验证变量。

<form name="settingsForm" novalidate>
<div>
  <label for="firstNameEdit">First name:</label>
  <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
  <p ng-show="validateMainForm && settingsForm.firstName.$invalid"
  class="help-block">You name is required.</p>
  <br />
</div>

<ng-form name="addressForm">
  <div>
    <label for="addressEdit">Address:</label>
    <input id="addressEdit" type="text" name="address" ng- model="person.address" />
  </div>
  <div>
    <label for="zipEdit">ZIP code:</label>
    <input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
    <p ng-show="validateAddressForm && addressForm.zip.$invalid" 
    class="help-block">Zip code is required</p>

  </div>
  <button type="submit" ng-click="submitAddressForm()">Save address</button>
  <br/>
</ng-form>

<button type="submit" ng-click="submitMainForm()">Save</button>

</form>

由于您禁用了默认验证，因此验证将在单击主表单以及地址表单的提交按钮时进行。提交时，将设置一个标志，如果该字段无效，则会显示错误块。有一个标记validateMainForm为settingsForm与validateAddressForm对addressForm。当该标志为true时，p如果无效，它将显示每个输入字段下方的元素。

这是证明这一点的朋克。

有关更多信息，您可以参考此博客Angular Form Validation：