在 angularjs 中验证嵌套表单

Validation of nested forms in angularjs

本文关键字：嵌套 表单 验证 angularjs      更新时间：2023-09-26

我有一个主窗体，在其中我有一个使用 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 在保存地址而不是保存时分开提交。

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

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

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

这是证明这一点的 plunker。

有关更多信息，您可以参考此博客 - 角度表单验证：

你可以做这样的事情

https://jsbin.com/latepo/edit?html,js,output

  <form  name="settingsForm" novalidate>
      <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 type="submit" ng-click="submit2()">Save address</button>
      </ng-form>
      <button type="submit" ng-click="submit1()">Save</button>
   </form>

angular.module('myapp', []).controller('MyController', MyController);
    function MyController ($scope){
           $scope.submit1 = function (){
                  alert('submit1');
           };
           $scope.submit2 = function (){
                  alert('submit2');
           };
     }
相关文章：