reference form in angular component without scope

Question

Currently I have this component definition:

    var controller = ['$http', '$timeout', '$scope', function($http, $timeout, $scope) {
        this.isInvalid = function() {
            return $scope.changePinForm.$invalid;
        };      
    }];

    var component = {
        templateUrl: path.fromRoot('/application/libs/components/pin-change/view/pin-change.html'),
        controller: controller,
        controllerAs: 'vm'
    };

    angular.module('pin-change', ['confirm-reject', 'compare-validator', 'is-numeric'])
        .component('pinChange', component);
});

Which references this html file via templateUrl:

<form name="changePinForm" class="form-horizontal">
  <!-- etc. etc. -->
</form>

At the moment I am having to use scope to reference the form:

$scope.changePinForm.$invalid;

I would prefer to avoid scope and reference the form from the component's controller.

Is this possible or is scope still the only way?

Pankaj Parkar · Accepted Answer · 2016-08-18 10:46:38Z

4

You could make your form name to be name="vm.changePinForm" use vm(controller alias).

And then you can easily access vm.changePinForm.$invalid inside your controller. By which you aren't depending on $scope inside your controller.

var controller = ['$http', '$timeout', 
  function($http, $timeout) {
    var vm = this;
    vm.isInvalid = function() {
        return vm.changePinForm.$invalid;
    };      
  }
];

answered Aug 18, 2016 at 10:46

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

reference form in angular component without scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related