角度验证表格
问题描述:
我有一个简单的表单。角度验证表格
<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未定义'?
答
你有模型,模块和控制器有点困惑。我的解决方案使用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文件。
因为您的控制器功能执行时可能还没有创建表单控制器。你不应该直接在你的表单控制器上设置任何东西。 –