不显示使用$错误,$无效的表格错误
我想在ng-book jsbin中复制一个示例。
这里是我的plnkr
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fields = [{placeholder: 'Email', isRequired: true},
{placeholder: 'Password', isRequired: true},
{placeholder: 'Comment(Optional)', isRequired: false}]
$scope.formSubmit = function(){
for (var i=0; i < $scope.fields.length; i++)
{ var obj = $scope.fields[i]
for (var key in obj){
if(obj.hasOwnProperty(key)){
alert(key + ' : ' + obj[key])
}
}
}
}
});
HTML
<html ng-app="plunker">
<head><script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name='main_form' ng-submit='formSubmit()' novalidate>
<div ng-repeat="field in fields" ng-form="dynamic_form">
<input type='text'
name='dynamic_input'
ng-required='field.isRequired'
ng-model='field.name'
placeholder='{{field.placeholder}}'>
<div ng-show="dynamic_form.dynamic_input.$dirty && dynamic_form.dynamic_input.$invalid">
<span ng-show="dynamic_form.dynamic_input.$error.required"> This field is required.</span>
</div>
</div>
<button type='submit' ng-diabled="main_form.$pristine && main_form.$invalid">Submit All</button>
</form>
</body>
</html>
我现在面临的问题在这里:
- 提交未禁用按钮
- 未显示所需字段的错误。
- 如果我点击提交,我也会获得$ hash key以及alert。这是为什么?
谢谢。
1)提交未禁用按钮
你有一个错字就必须ng-disabled
。同时改变你的状态无效时禁用: -
<button type='submit' ng-disabled="main_form.$invalid">Submit All</button>
2)错误为必填字段不被显示。
现在会显示出来,当你删除键入值
3)如果我点击提交,我得到$散列键以及处于警戒。这是为什么?
Angular添加了一个唯一的键($$ hashkey)来跟踪重复的项目。如果你在ng-repeat中指定了一个track by
(它必须是一个唯一的键),它不会添加它。在你的情况下,因为没有id或任何关联,你可以使用$index
。 (在演示中,我添加了一个id属性,并使用了跟踪所)
ng-repeat="field in fields track by $index"
非常感谢。特别是对于演示的额外努力:) – Indyarocks 2014-08-29 16:56:37
你吃了欢迎.. :) – PSL 2014-08-29 17:38:27
我没有:P随时欢迎你:) 你可能会看到很多问题轰炸在角度上的*。当我最近开始学习angularjs。 – Indyarocks 2014-08-29 18:22:36
你在你的提交按钮拼错单词“已禁用”。
<button type='submit' ng-diabled="main_fo
你明确地告诉它,你希望它只显示错误,如果它很脏。因此,除非您填写内容,否则您不会看到它们,然后再将其重新删除。如果您想在填充字段之前查看错误,请删除脏检查。
<div ng-show="dynamic_form.dynamic_input.$dirty &&
$$ hashKey作为ngRepeat的一部分添加。为了避免这些属性,AngularJS在内部(for angular.toJson)执行以下测试。
key.charAt(0) === '$' && key.charAt(1) === '$'
您还可以使用angular.forEach,以避免检查hasOwnProperty但并不要么跳过“$$”变量。
我可以向您展示另一个以不同方式进行验证的例子,或者您完全想要这种方式吗? – 2014-08-29 14:33:40
当然。最受欢迎的。 – Indyarocks 2014-08-29 16:48:04