angularJS中的动态表单验证无效
[英]Dynamic form validation in angularJS not working
问题描述
I have created dynamic form, And adding the ng-required attributes dynamically to my controls. 
我创建了动态表单，并将ng-required属性动态添加到我的控件中。 but now it's not working . 但现在它不起作用。
This is my JS : 这是我的JS：
var app = angular.module('birthdayToDo', []);
app.controller('main', function($scope){
$scope.Control={};
$scope.Attributes =[
{
"Name":"FirstName",
"Required":true
},
{
"Name":"LastName",
"Required":false
},
{
"Name":"Email",
"Required":true
},
{
"Name":"Age",
"Required":false
}];
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
alert($scope.Control[1]); // to check correct index
}else{
return;
}
};
});
And My HTML : 我的HTML：
<html>
<head lang="en">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script src="app.js"></script>
</head>
<body ng-app="birthdayToDo" ng-controller="main">
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<table>
<tr ng-repeat="attribute in Attributes">
<td>{{attribute.Name}}</td>
<td>
<input type="text" name="Control[$index]" ng-model="Control[$index]" ng-required="{{attribute.Required}}" />
</td>
<td>
<p ng-show="userForm.Control[$index].$error.required">{{attribute.Required == "true" && attribute.Name+' Required' || ''}}</p>
</td>
</tr>
</table>
<input type="submit" value="Save" />
</form>
</body>
I want to show error message when either the textbox value change or form is submitted . 我想在提交文本框值更改或表单时显示错误消息。
But when I'm doing same thing with static form it's working. 但是当我用静态形式做同样的事情时，它正在发挥作用。 working plunker 工作的plunker
1 个解决方案
解决方案1
5 已采纳 2014-12-31 18:49:00
Dynamic control names and form validation does not work that well with older angular versions (< 1.3.x). 对于较旧的角度版本（<1.3.x），动态控件名称和表单验证效果不佳。 And to add to that you have a very old angular version (1.0.3). 另外，你有一个非常古老的角度版本（1.0.3）。 If you upgrade to 1.3.x version of angular you could easily achieve this with some changes (some of them you need anyways): 如果您升级到1.3.x版本的角度，您可以通过一些更改轻松实现这一点（其中一些你还需要）：
1) As mentioned by @dfsq you need to provide a boolean value to ng-required bound scope property otherwise you will end up setting truthy "true"/"false" to the controls and it will make everything required. 1）正如@dfsq所提到的，你需要为ng-required绑定范围属性提供一个布尔值，否则你最终会向控件设置truthy“true”/“false”，它将完成所需的一切。
2) Use ng-attr-name to provide interpolated dynamic names. 2）使用ng-attr-name提供插值动态名称。 It will automatically expand to name attribute. 它会自动扩展为name属性。
3) With 1.3 form controller sets an $error.required property on a property with the same name as that of the control and there are some more special properties it populates. 3）使用1.3 表单控制器在属性上设置$error.required属性，该属性与控件的名称相同，并且它会填充一些更特殊的属性。 You can always track total number of required errors with form.$error.$required.length 您始终可以使用form.$error.$required.length跟踪所需错误的总数form.$error.$required.length
4) Do not use index to set the ng-model, use the proper attribute name itself so that it is more readable and easy to manage. 4）不要使用索引来设置ng-model，使用适当的属性名称本身，使其更易读，更易于管理。
5) You could also utilize one-time binding ( :: ) to avoid unwanted watches, example field names, display names, required attributes which if they are non changing lists. 5）您还可以利用一次性绑定（ ::来避免不需要的监视，示例字段名称，显示名称，必需属性（如果它们是非更改列表）。
6) You can use form controller's special properties to manage your validations and other behaviors and interactions as you need. 6）您可以使用表单控制器的特殊属性来根据需要管理验证和其他行为和交互 。 Here is a sample demo which just utilized only a small subset of what form controller provides. 这是一个示例演示，它只使用了控制器提供的一小部分形式。
View: 视图：
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<table>
<tr ng-repeat="attribute in Attributes">
<td>{{::attribute.Name}}</td>
<td>
<input type="text" ng-attr-name="{{::attribute.Name}}" ng-model="Control[attribute.Name]" ng-required="::attribute.Required" />
</td>
<td>
<p ng-if="userForm[attribute.Name].$error.required" class="error">{{attribute.Name }} Required</p>
</td>
</tr>
</table>
<input type="submit" value="Save" ng-disabled="userForm.$invalid"/>{{Control}}
</form>
Controller: 控制器：
/* Set proper boolean values to Required*/
$scope.Attributes = [{
"Name": "FirstName",
"Required": true
}, {
"Name": "LastName",
"Required": false
}, {
"Name": "Email",
"Required": true
}, {
"Name": "Age",
"Required": false
}];
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
/*Now control will have proper property names with respective ngmodel names*/
console.log($scope.Control);
} else {
return;
}
};
Sample Demo 示例演示
var app = angular.module('birthdayToDo', []); app.controller('main', function($scope) { $scope.Control = {}; //Set boolean values to Required $scope.Attributes = [{ "Name": "FirstName", "Required": true }, { "Name": "LastName", "Required": false }, { "Name": "Email", "Required": true }, { "Name": "Age", "Required": false }]; $scope.submitForm = function(isValid) { if (isValid) { alert('our form is amazing'); console.log($scope.Control); /*Use Controle object which has proper property names to reflect respective ngModel*/ } else { return; } }; });
.error { color: red; } input.ng-invalid { border: 2px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <div ng-app="birthdayToDo" ng-controller="main"> <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <table> <tr ng-repeat="attribute in Attributes"> <td>{{::attribute.Name}}</td> <td> <input type="text" ng-attr-name="{{::attribute.Name}}" ng-model="Control[attribute.Name]" ng-required="::attribute.Required" /> </td> <td> <p ng-if="userForm[attribute.Name].$error.required" class="error">{{attribute.Name }} Required</p> </td> </tr> </table> <input type="submit" value="Save" ng-disabled="userForm.$invalid"/>{{Control}} </form> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.