angularjs components getting a form inside template

angularjs angularjs-components
Luna picture Luna · Mar 17, 2016 · Viewed 12.4k times · Source

so I have a component with a template containing a form.

mycomponent.html:

<div>
    <form name="myForm"> 
        <!-- more html code -->
    </form>
</div>

How can I access myForm inside the component controller? Currently I'm injecting $scope to get it from that. Or is that the only way to get the form?

Edit: Added some code to better illustrate in javascript

angular.module('example')
.component('myComponent', {

    templateUrl: 'mycomponent.html',
    controller: function($scope) {
         $scope.myForm // This works
         this.myForm // undefined, can I access it through the component scope instead of $scope somehow? 
    }
 });

Answer

Dave picture Dave · Mar 17, 2016

The name attribute of a form is what angular uses to decide what to bind to. So, if you're using the controllerAs syntax, you have to use that in the form name:

  <body ng-controller="MainCtrl as vm">
    <form name='vm.myForm'>
    </form>
  </body>

This will allow you to refer to it in your controller without using $scope, but only after the controller has been successfully created:

app.controller('MainCtrl', function($scope, $timeout) {

    var vm = this;

    console.log(vm.myForm);  // undefined

    $timeout(function() {
        console.log(vm.myForm);  // FormController object
    }, 100);
});

Here is a working plunk.

Related questions

AngularJS 1.5+ Components do not support Watchers, what is the work around?

I've been upgrading my custom directives to the new component architecture. I've read that components do not support watchers. Is this correct? If so how do you detect changes on an object? For a basic example I have custom component …

Read More
angularjs 1.5 component dependency injection

this may sound newb, but I have been following this tutorial for angularjs component. I am new to components and how do I inject a constant Utils or authService to my component like this? app.component('tlOverallHeader', { bindings: { data: '=…

Read More
How to watch component binding change using Angular component

How can I listen to angular component binding change and perform actions? angular.module('myapp') .component('myComponent', { templateUrl: 'some.html', controller: MyController, controllerAs: 'myCtrl', bindings: { items: '<' } }); now when items changes I want to perform another action using …

Read More