AngularJS范围表单在页面上有多个表单时被低估

首先，如果页面上只有一个表单，例如：

<form class="form-horizontal" name="formCreateCtb">
         ...

然后，我可以通过以下方式轻松地在控制器中访问它：

 $scope.formCreateCtb.$setPristine(); // reset form validation

但是一旦我在页面上添加了第二个表单，例如：

<form class="form-horizontal" name="formCreateCtb">
         ...
<form class="form-horizontal" name="formCreateCtbs">
         ...

然后我无法像以前那样访问范围内的第二种形式：

$scope.formCreateCtb.$setPristine(); // still work OK
$scope.formCreateCtbs.$setPristine(); // Exception: formCreateCtbs is underfined

为什么会有这种行为，以及如何访问范围内的表单，当我在页面上有多个表单时。谢谢！

编辑：似乎问题是在项目中我有更复杂的标记，第二种形式住在引导选项卡中，在显示表单的那一刻是不可见的。当我从模态中添加第二种形式时，它工作正常。解决方法是将整个选项卡包装在一个表单元素中。

使用 ng-form 指令

在线演示 - http://codepen.io/anon/pen/AXxVvY?editors=1010#0

.html

<form name="formCreateCtb" novalidate>
  <ng-form name="formCreateCtb">
    <label>Email</label>
    <input type="text" class="form-control" name="email" ng-model="email" required>
    <p class="help-block" ng-show="formCreateCtb.email.$invalid">Valid Email Address Required</p>
  </ng-form>
</form>

<form name="formCreateCtbs" novalidate>
  <ng-form name="formCreateCtbs">
    <label>Email 2</label>
    <input type="text" class="form-control" name="email2" ng-model="email2" required>
    <p class="help-block" ng-show="formCreateCtbs.email2.$invalid">Valid Email Address Required</p>
  </ng-form>
</form>
<button ng-click="setPristine()">call setPristine</button>

.js

.controller('mainController', function($scope) {
  $scope.setPristine = function() {
    $scope.formCreateCtb.$setPristine(); 
    $scope.formCreateCtbs.$setPristine(); 
    console.log('setPristine');
  };
});

它对我有用。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
  'use strict';
  $scope.data = {
    "name": ""
  };
  $scope.reset = function() {
    $scope.data.name = "";
    $scope.form.$setPristine();
  }
  $scope.reset1 = function() {
    $scope.data.name1 = "";
    $scope.form1.$setPristine();
  }
});

input.ng-invalid.ng-dirty {
  background-color: #FA787E;
}
input.ng-valid.ng-dirty {
  background-color: #78FA89;
}

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="MainCtrl">
    <form name="form" id="form" novalidate>
      <input name="name" ng-model="data.name" placeholder="Name" required/>
      <button class="button" ng-click="reset()">Reset</button>
    </form>
    <form name="form1" id="form1" novalidate>
      <input name="name1" ng-model="data.name1" placeholder="Name1" required/>
      <button class="button" ng-click="reset1()">Reset</button>
    </form>
    <p>Pristine: {{form.$pristine}}</p>
    <p> <pre>Errors: {{form.$error | json}}</pre>
      <p>Pristine: {{form1.$pristine}}</p>
      <p> <pre>Errors: {{form1.$error | json}}</pre>
  </div>
</body>
</html>

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
  'use strict';
  $scope.data = {
    "name": ""
  };
  $scope.reset = function() {
    $scope.data.name = "";
    $scope.form.$setPristine();
  }
  $scope.reset1 = function() {
    $scope.data.name1 = "";
    $scope.form1.$setPristine();
  }
});

input.ng-invalid.ng-dirty {
  background-color: #FA787E;
}
input.ng-valid.ng-dirty {
  background-color: #78FA89;
}

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="MainCtrl">
    <form name="form" id="form" novalidate>
      <input name="name" ng-model="data.name" placeholder="Name" required/>
      <button class="button" ng-click="reset()">Reset</button>
    </form>
    <form name="form1" id="form1" novalidate>
      <input name="name1" ng-model="data.name1" placeholder="Name1" required/>
      <button class="button" ng-click="reset1()">Reset</button>
    </form>
    <p>Pristine: {{form.$pristine}}</p>
    <p> <pre>Errors: {{form.$error | json}}</pre>
      <p>Pristine: {{form1.$pristine}}</p>
      <p> <pre>Errors: {{form1.$error | json}}</pre>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：