AngularJS scope form is underfined while multiple forms on page

Question

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.

can you reproduce in jsfiddle or plnkr

Rakesh Chand
– Rakesh Chand

2016-07-15 12:17:32 +00:00
Commented Jul 15, 2016 at 12:17 — Rakesh Chand
– Rakesh Chand, Commented Jul 15, 2016 at 12:17

Jossef Harush Kadouri · Accepted Answer · 2016-07-15 12:35:37Z

2

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

});

edited Jul 15, 2016 at 12:35

answered Jul 15, 2016 at 12:17

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

igorGIS Over a year ago

Jossef Harush, Rakeschand thank for reply guys, i test it in fiddleJs and it works, also it works with ng-form solution in demo above, but not in my project,

igorGIS Over a year ago

I try to figure out what the difference between examples and project code

Dark Army · Accepted Answer · 2016-07-15 13:06:36Z

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>

Suvarna · Accepted Answer · 2017-03-23 09:41:57Z

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>

Collectives™ on Stack Overflow

AngularJS scope form is underfined while multiple forms on page

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related