How to access AngularJS directive Form fields into parent controller

Question

I created following form as a angular directive and try to access the firstname from parent controller. Please help me or guide me how to access directive form fields from inside MainCtrl.

HTML

 <pre>
      {{filter-frm| json}}
 </pre> 

 <div ng-controller="MainCtrl">
    <userform></userform>
 </div>

JS

.controller('MainCtrl', ['$scope',  function($scope){
    console.log($scope.filterForm.firstname) //How to get this ?
};

.directive('userform', [function () {
    return {
        restrict: 'E',
        scope: { formCtrl: '=' }
        template: '<div>'
            + '<form id="filterForm" ng-submit="login()">'
            + '<input name="firstname" ng-model="user.firstName">'
            + '</form> '
            + '</div>',
        link: function (scope, element, iAttrs) {
            var form = element.find('form');
            scope.formCtrl = form.controller('form');
        }
    };
}]);

glepretre · Accepted Answer · 2014-05-14 11:19:30Z

2

If you add a name attribute to your form in your directive template, you will be able to access it via scope.formName. It should also bind the input fields values via scope.formName.fooInput.

In your case, adding name="filterForm" should do the trick:

template: '<div>'
    + '<form id="filterForm" name="filterForm" ng-submit="login()">'
    + '<input name="firstname" ng-model="user.firstName">'
    + '</form> '
    + '</div>',

Now you should be able to access scope.filterForm in the parent controller.

Param: name (optional); Type: string; Details: Name of the form. If specified, the form controller will be published into related scope, under this name.

from ngForm doc

answered May 14, 2014 at 11:19

glepretre

8,1675 gold badges47 silver badges58 bronze badges

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

Comments

webaba · Accepted Answer · 2014-05-14 11:20:52Z

0

You have to bind the values of the field to variables of your controller's model. To do that, you have to expose the form fields as attributes of your directive.

See https://docs.angularjs.org/#!/guide/directive and how to use the scope field.

answered May 14, 2014 at 11:20

webaba

6515 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to access AngularJS directive Form fields into parent controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related