Search code examples
angularjsangularjs-scopeecmascript-6es6-class

How to access the form object on a angular 1.6 / es6 application?


I am working on a app that uses angular 1.6 with es6. I have a form :

<form name="foobar" ng-submit="$ctrl.submitThat()"  novalidate>

in the submitThat() function I would like to access the form object and check its validation state, but it does not seems to be available on the $scope object. The $scope object exist, I made sure to pass it as param of the contructor of the controller class, but it has no "foobar" attribute (the form name).

class StuffController {
/*@ngInject*/
constructor($translate, StuffService, $log, $interval, $scope) {
    this.$translate = $translate;
    this.StuffService= StuffService;
    this.$log = $log;
    this.$interval = $interval;
    this.$scope = $scope;
    //more unrelated code
}
submitThat(){
   console.log(this.$scope);//outputed object misses the foobar property
    }
}

I forgot to add that the app uses webpack.


Solution

  • The validation object is now a property, not a string anymore. So I had to replace :

    <form name="foobar" ng-submit="$ctrl.submitThat()"  novalidate>
    

    with:

    <form name="$ctrl.foobar" ng-submit="$ctrl.submitThat()"  novalidate>
    

    It is then available in the controller on the $ctrl object.

    Little things keep changing with this framework, so that I can have entertaining afternoons.