Question

我试图在我的视图中检查表单的$ valid属性：

  <!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>Form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controller.js"></script>
  </head>

  <body ng-controller="FormController as $ctrl">
    <form name="$ctrl.myForm">
      <div>
        <input type="text" name="myName" ng-model="$ctrl.name">
      </div>
    </form>
  </body> 

</html>

我的控制器：

(function(){
    angular.module('app').controller('FormController', formController);

    function formController(){
        var vm = this;
        vm.name = 'John';
        console.log(vm);
    }
})();

我的应用：

(function(){
    var app = angular.module('app',[]);
})();

不确定问题是什么，但我不断收到以下错误：

我只是想打印出来的＆＃39; vm＆＃39;到控制台，我得到了以下内容：

如何访问myForm＆＃39;财产形成了＆＃39; vm＆＃39;？

Answer 1

如何在控制器中检查表单是否有效？我尝试使用vm.myForm.$valid并且错误地说"can not read property '$valid' of undefined"。

form controller需要一个摘要周期来处理name=$ctrl.myForm属性。

使用$doCheck Life-Cycle Hook等待：

function formController($timeout){
    var vm = this;
    var oldMyForm = false;
    this.$doCheck = function() {
      if (!oldMyForm && vm.myForm) {
        console.log("$valid="+vm.myForm.$valid);
      }
      oldMyForm = vm.myForm;
    };
}

来自文档：

生命周期挂钩

指令控制器可以提供AngularJS在指令生命周期中的点调用的以下方法：


$doCheck() - 在摘要周期的每个回合调用。提供检测和处理更改的机会。必须从此挂钩调用您希望采取的任何响应您检测到的更改的操作;实现这一点对于调用$onChanges时没有影响。例如，如果您希望执行深度相等检查或检查Date对象，则此挂钩可能很有用，AngularJS的更改检测器无法检测到这些更改，因此不会触发$onChanges。这个钩子没有参数调用;如果检测到更改，则必须存储先前的值以与当前值进行比较。


— AngularJS Comprehensive Directive API Reference - Life-Cycle Hooks

DEMO on PLNKR

我使用$timeout代替$doCheck函数，它也有效：
$timeout(function(){ 
    console.log(vm.myForm.$error); 
});

使用$timeout是code smell，这是一个更大问题的症状。

通常，控制器应该等待用户提交表单。或者控制器应该使用ng-change指令对用户输入作出反应。在这两种情况下，form controller都会在框架调用任一函数之前验证输入。只有在用户输入后才能检查有效性。

无法从AngularJS中的控制器访问表单

1 个答案:

生命周期挂钩