in angularjs, how do I access a formController?

Question

when reseting the data in a form, wish to set form.setPristine(), but the formController is not yet registered in $scope.

this may seem like a dumb question, but how can I find the formController?

in the code below, get "TypeError: Cannot call method 'setPristine' of undefined"

index.html

<ng-form name='wordForm' ng-controller='wordCntl' >
  ...
</ng-form>

word.js

var langMod = angular.module('langMod', []);

langMod.controller( 'wordCntl', function($scope,$http,$location) {

  // data
  $scope.dflt = { wrd_id: '', usr_id: '', ln: '', word: '' };
  $scope.orig = {};
  $scope.data = {};

  // pull record default
  $scope.reset = function() {
    $scope.orig = angular.copy($scope.dflt);
    $scope.data = angular.copy($scope.orig);
    $scope.wordForm.setPristine();
  }

  $scope.reset();
};

the only way I know to get to the formController is when it's been set in the $scope. but it's not there yet, and I do not know how to find it.

Why don't you just check for $scope.wordForm for undefined\null before calling this method. If the form is not there once its loaded it would be in pristine state already. — Chandermani
– Chandermani, Commented Nov 12, 2013 at 4:55
@Chandermani - true, but what if I wanted to set the form dirty? — cc young
– cc young, Commented Nov 12, 2013 at 5:01
You can create a watch on wordForm and when it gets assigned the first time you can do whatever you want. — Chandermani
– Chandermani, Commented Nov 12, 2013 at 6:18

Jonathan Rowny · Accepted Answer · 2013-11-12 04:48:09Z

2

Directive controllers are shared among other directives. To access it, create a custom directive on the form and it becomes the 4th property to the link function.

Inside your custom directive you do this:

//inside custom directive
link: function(scope, element, attrs, controller){
  controller.$setPristine();
}

I realize this is a very literal answer to your question. The real solution is probably not to call $scope.reset yet... why would you need to? Doesn't your form start off pristine anyway? If not, what is making it not pristine?

answered Nov 12, 2013 at 4:48

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

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

4 Comments

cc young Over a year ago

an answer to your question, am using the reset() function both to initialize the data and as the onclick trigger to the reset button in the form. so yes, I could use a directive on the onclick which would both call reset() and setPristine()

cc young Over a year ago

thanks! your answer makes perfect sense, but is there another way to get to the formController without having to use a directive? or are we guaranteed that whenever we wish to use a formController that a directive would be appropriate? what if, for example, I wished to start off with a dirty form for some reason?

cc young Over a year ago

cannot make that work!! the controller parameter is undefined

Jonathan Rowny Over a year ago

The directive must live on the same element for the controller to be shared. The simplest solution for this is to not call $scope.wordForm.setPristine() initially. You can do it in subsequent calls to reset. Do this by checking for its existence in your reset function... as the form will start of pristine anyway, it should be fine. Your data will be set up and the form starts off pristine.

Collectives™ on Stack Overflow

in angularjs, how do I access a formController?

index.html

word.js

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

index.html

word.js

1 Answer 1

4 Comments

Related