如何在 angular 1.6 / es6 应用程序上访问表单对象？

Question

我正在开发一个使用 angular 1.6 和 es6 的应用程序。我有一个表格：

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

在 submitThat() 函数中我想访问表单对象并检查其验证状态，但它似乎在 $scope 对象上不可用。 $scope 对象存在，我确保将它作为控制器 class 的构造函数的参数传递，但它没有 "foobar" 属性（表单名称）。

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
    }
}

我忘了补充一点，应用程序使用了 webpack。

Answer 1

假设 $scope.foobar 由于某种原因不存在，您可以编辑该方法：

submitThat(form) {
  console.log('form:', form);
}

显然原始调用需要更改：

<form name="foobar" onSubmit="$ctrl.submitThat(foobar)" novalidate>

不过，我建议您查看 'vm'，并开始使用 vm 命名您的表单（和模型）； John Papa 的指南是一个很好的起点，它指出任何带有 'dots' 的模型都不是真正的模型...

Answer 2

验证对象现在是属性，不再是字符串。所以我不得不更换：

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

与：

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

然后在 $ctrl 对象上的控制器中可用。

这个框架不断改变小事情，这样我就可以度过愉快的下午。

如何在 angular 1.6 / es6 应用程序上访问表单对象？

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

angularjs

ecmascript-6

angularjs-scope

es6-class