Can I access a form in the controller?

Question

I'm currently using the following.

$scope.$$childHead.customerForm[firstName], so that:

<form name="customerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" 
         tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

But this only works in Chrome. Now I tried the following:

$scope.editCustomerForm[firstName], so that:

<form name="customerForm" ng-model="editCustomerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

Which doesn't work. Note my form is inside a Foundation Tab. How can I access firstName?

EDIT: It looks like the form isn't added to the scope when it's inside a Foundation Tab.

Anyone has got a solution for this?

score 214 · Answer 1 · edited Nov 18 '21 at 13:28

214

The reason you can't access the input is because the Foundation tab (or ng-repeat?) creates an isolate scope. One way to address this is using the controller as syntax:

<div ng-controller="MyController as ctrl">

<!-- an example of a directive that would create an isolate scope -->
<div ng-if="true">

<form name="ctrl.myForm">
    ...inputs
    Dirty? {{ctrl.myForm.$dirty}}

    <button ng-click="ctrl.saveChanges()">Save</button>
</form>

</div>

</div>

Then you can access the FormController in your code like:

function MyController () {
    var vm = this;
    vm.saveChanges = saveChanges;

    function saveChanges() {

       if(vm.myForm.$valid) { 
            // Save to db or whatever.
            vm.myForm.$setPristine();
       }
}

edited Nov 18 '21 at 13:28

x-yuri

16,722
15
114
161

answered Nov 25 '14 at 01:10

slopapa

2,883
1
16
11

As far as I can see, the template cannot call the "saveChanges" method, as it is not exposed to the template – Spock Dec 05 '14 at 14:07
2

The "saveChanges" method is exposed in line 3 of the javascript or am I misunderstanding? – slopapa Dec 08 '14 at 23:32
3

this is good as it means you can avoid injecting the whole $scope, which is cleaner in my opinion – 72GM Jan 08 '15 at 16:54
2

How do you test this in jasmine? In my spec, vm.myForm is undefined – bahrieinn Nov 20 '15 at 16:29
1

This should be noted in the official docs for 1.5.X that is the way to do components and es6. thank you sir – MatanCo May 28 '16 at 20:24
tried this but $valid doesnt seem to work with this solution – committedandroider Nov 28 '17 at 23:33
Worked for me, but I had to change my ng-form to an form tag. – linuxunil Jul 26 '18 at 13:36

score 94 · Answer 2 · answered Apr 09 '14 at 14:18

94

You can attach the form to some object which is defined in a parent controller. Then you can reach your form even from a child scope.

Parent controller

$scope.forms = {};

Some template in a child scope

<form name="forms.form1">
</form>

Problem is that the form doesn't have to be defined in the moment when to code in the controller is executed. So you have to do something like this

$scope.$watch('forms.form1', function(form) {
  if(form) {
    // your code...
  }
});

answered Apr 09 '14 at 14:18

ondrs

1,095
7
5

10

I'd suggest using `var watcher = $scope.$watcher` and inside of the if statement you would excute watcher() to unbind the watch. This makes it a 1 time watch so you're not watching every digest after it is set – willJk Jun 22 '15 at 17:33

score 91 · Answer 3 · edited Nov 19 '15 at 12:52

91

If you want to pass the form to the controller for validation purposes you can simply pass it as an argument to the method handling the submission. Use the form name, so for the original question it would be something like:

<button ng-click="submit(customerForm)">Save</button>

edited Nov 19 '15 at 12:52

Jonatas Walker

13,583
5
53
82

answered Jun 09 '14 at 15:19

Anthony Shull

1,095
7
8

15

To clarify for future readers, if say your form is named/defined similar to this `
`, or even `
`, then your click event would be as follows: `ng-click="submit(myform)"`. Then you can access the Angular form object in your click function like: `$scope.submit = function (form) { if (form.$valid) {` etc. – Matty J Mar 31 '15 at 05:41
I find a problem here - let's say there's a dropdown list in the form. Using the above method only gives me the view value and not the exact value that I need. Or am I doing anything wrong, will add a fiddle. – swateek Feb 19 '16 at 15:02

score 84 · Answer 4 · edited Feb 05 '15 at 07:41

84

Bit late for an answer but came with following option. It is working for me but not sure if it is the correct way or not.

In my view I'm doing this:

<form name="formName">
    <div ng-init="setForm(formName);"></div>
</form>

And in the controller:

$scope.setForm = function (form) {
    $scope.myForm = form;
}

Now after doing this I have got my form in my controller variable which is $scope.myForm

edited Feb 05 '15 at 07:41

BoltClock

700,868
160
1,392
1,356

answered May 26 '14 at 03:46

Atul Chaudhary

3,698
1
31
51

1

The only thing I'd add to this is to be sure this is at the bottom of the form. – smb Jul 29 '14 at 15:09
Position of
does not matter. Just be careful that it in under form. – waqas Sep 19 '14 at 18:06
1

good, but I would prefer a simpler solution: ng-init="$parent.myForm = formName" Whithout the need to change the controller Note: it's only working with direct controller, contrary to the solution above – mastilver Nov 18 '14 at 10:32
After trying the other methods, I settled on this one because it allows the `name` attribute to be exactly what I want it to be. The problem with the other dummy-object solutions is if this component is used in another component with an ng-form, that other ng-form uses this forms name literally. So it will have a field with a string-literal (NOT nested properties) name of "dummy.myForm", I found this unacceptable. – Basil Jul 15 '17 at 00:29
I tried and failed many times to use the controllerAs syntax (I'm working with $mdDialog). Finally settled for this and it did a great job. Only note is that any controller initializations need to be run on a $timeout as the form isn't available when the controller first runs – Peter Nixey Sep 11 '19 at 17:14

score 24 · Answer 5 · answered Nov 19 '14 at 09:28

To be able to access the form in your controller, you have to add it to a dummy scope object.

Something like $scope.dummy = {}

For your situation this would mean something like:

<form name="dummy.customerForm">

In your controller you will be able to access the form by:

$scope.dummy.customerForm

and you will be able to do stuff like

$scope.dummy.customerForm.$setPristine()

WIKI LINK

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use <input type="text" ng-model="someObj.prop1"> rather than <input type="text" ng-model="prop1">

If you really want/need to use a primitive, there are two workarounds:

1.Use $parent.parentScopeProperty in the child scope. This will prevent the child scope from creating its own property. 2.Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)

its worth mentioning that `dummy.customerForm` will be undefined until the conditions of `ng-if` are met should the form element have an `ng-if` conditional upon it — haxxxton, May 25 '16 at 06:04

score 22 · Answer 6 · answered Mar 21 '16 at 15:35

This answer is a little late, but I stumbled upon a solution that makes everything a LOT easier.

You can actually assign the form name directly to your controller if you're using the controllerAs syntax and then reference it from your "this" variable. Here's how I did it in my code:

I configured the controller via ui-router (but you can do it however you want, even in the HTML directly with something like <div ng-controller="someController as myCtrl">) This is what it might look like in a ui-router configuration:

views: {
            "": {
                templateUrl: "someTemplate.html",
                controller: "someController",
                controllerAs: "myCtrl"
            }
       }

and then in the HTML, you just set the form name as the "controllerAs"."name" like so:

<ng-form name="myCtrl.someForm">
    <!-- example form code here -->
    <input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>

now inside your controller you can very simply do this:

angular
.module("something")
.controller("someController",
    [
       "$scope",
        function ($scope) {
            var vm = this;
            if(vm.someForm.$valid){
              // do something
            }
    }]);

Although this is mostly just the same technique as several other answers suggest, it's the best variation and should be the accepted answer, especially since everybody uses controllerAs anyway now. — Semicolon, Mar 28 '16 at 07:19

score 6 · Answer 7 · edited May 23 '17 at 12:02

Yes, you can access a form in the controller (as stated in the docs).

Except when your form is not defined in the controller scope and is defined in a child scope instead.

Basically, some angular directives, such as ng-if, ng-repeat or ng-include, will create an isolated child scope. So will any custom directives with a scope: {} property defined. Probably, your foundation components are also in your way.

I had the same problem when introducing a simple ng-if around the <form> tag.

See these for more info:

Note: I suggest you re-write your question. The answer to your question is yes but your problem is slightly different:

Can I access a form in a child scope from the controller?

To which the answer would simply be: no.

... unless you set up your forms and controller as described in @ondrs' answer (using `$scope.forms = {}` and `name="forms.form1"`) — marapet, Nov 12 '14 at 08:56
Please see the answer immediately above yours by KhalilRavanna. You can access the form from $scope.formName. He provides a working example — micahblu, Jul 17 '15 at 20:04

score 3 · Answer 8 · answered Mar 07 '18 at 12:05

3

add ng-model="$ctrl.formName" attribute to your form, and then in the controller you can access the form as an object inside your controller by this.formName

answered Mar 07 '18 at 12:05

Dhurim Kelmendi

61
1
2

score -1 · Answer 9 · answered Feb 08 '17 at 15:03

-1

Definitely you can't access form in scope bec. it is not created. The DOM from html template is loaded little bit slowly like controller constructor. the solution is to watch until DOM loaded and all the scope defined!

in controller:

$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});

answered Feb 08 '17 at 15:03

Victor Orletchi

469
1
5
15

a watch to access a form inside a controller, is it the worst answer – bedomon Mar 23 '23 at 14:19

Can I access a form in the controller?

9 Answers9

Linked