CODEWITHSUNDEEP
angularjsformsscope
igorGIS
igorGIS

Reputation: 1946

AngularJS scope form is underfined while multiple forms on page

Firstly if have only one form on page, like:

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

Then i can easily access it in my controller in following way:

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

But as soon as i added second form on page, like:

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

Then i can't access second form in scope like previosly:

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

Why this behavior, and how to access form in scope, when i have multiple forms on page. Thanks!

EDIT: It seems the issue is that in project i have more complex markup, the second form live in bootstrap tab, that is not visible at the moment of forms shown. When i added second form out of modal, it works fine. The workaround is wrap entire tabs in one form element.

Upvotes: 0

Views: 1609

Answers (3)

Suvarna
Suvarna

Reputation: 1

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="[email protected]" 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>

Upvotes: 0

Dark Army
Dark Army

Reputation: 268

It is working for me.

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="[email protected]" 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>

Upvotes: 1

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34207

Use the ng-form directive

Online Demo - 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');
  };

});

Upvotes: 2

Related Questions