javascript - 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 所示。您可以使用验证变量 $invalid由 AngularJS 提供。

<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>

由于您已禁用默认验证，因此验证发生在单击主表单和地址表单的提交按钮时。提交时，设置一个标志，如果该字段无效，则显示错误 block 。有一个标志 validateMainForm对于 settingsForm和 validateAddressForm对于 addressForm .当标志为真时，它显示 p每个输入字段下方的元素(如果无效)。

这里是 plunker这证明了这一点。

更多信息可以引用这篇博客- Angular Form Validation :