角度验证表格

角度验证表格

问题描述:

我有一个简单的表单。角度验证表格

<html lang="en" ng-app="MyApp"> 
    <head> 
    </head> 
    <body ng-controller="AppCtrl"> 
    <form name="myForm" id="myForm"> 
    <input type="text" ng-model="field" name="myField" /> 
     <div ng-show="myForm.myField.$error" style="color: red"> 
      {{myForm.myField.$error}} 
     </div> 
    </form> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="controller.js"></script> 
    </body> 
    </html> 

,我有角控制器

angular.module('MyApp',[]) 
.controller('AppCtrl', function($scope) { 
    $scope.myForm.myField.$error = "just to see it work"; 
}); 

为什么我得到错误 '$ scope.myForm未定义'?

+2

因为您的控制器功能执行时可能还没有创建表单控制器。你不应该直接在你的表单控制器上设置任何东西。 –

你有模型,模块和控制器有点困惑。我的解决方案使用1.2角,但你很快就会需要移动到角2 这是我的例子返工:

<html lang="en" ng-app="MyApp"> 
    <head> 
    </head> 
    <body ng-controller="AppCtrl as ctrl"> 
     <form name="myForm" id="myForm"> 
      <input type="text" ng-model="ctrl.myField" name="myField" /> 
      <div style="color: red"> 
       {{ctrl.myField}} 
      </div> 
     </form> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"> 
    </script> 
    <script src="controller.js"></script> 
    </body> 
</html> 

而在controller.js:

angular.module('MyApp',[]) 
.controller('AppCtrl', [function() { 
    this.myField = "just to see it work"; 
}]); 

在上面,我已将“myField”放在控制器“AppCtrl”的范围内。我已将整个页面置于模块“MyApp”的控制之下。您可以使用“ng-bind”注入模型,也可以在div的主体中使用大括号符号来绑定“ctrl”的“myField”模型。我已经使用了后者,但请注意,在解析页面后,将建立此绑定。 如果你现在全部加载,你应该看到“只看到它的工作”在红色下的文本字段,也在文本字段。当您编辑文本框时,红色文本将会同步更改。一旦你有了这个工作,你永远不会停止学习更多关于Angular的知识!

我应该补充说这个模型有一个属性。为了概括这一点,您将需要创建一个具有多个属性(每个输入元素一个)的模型,以便在提交表单时返回JSON对象。

你的变量名不能有点。

尝试myFormMyFieldError而不是myForm.myField.$error

其他:不使用属性style,请使用CSS文件。