use*_*751 3 html javascript angularjs angularjs-ng-model angularjs-validation
我创建了动态表单,并ng-required动态地将属性添加到我的控件中.但现在它不起作用.
这是我的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;
}
};
});
我的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>
我想在提交文本框值更改或表单时显示错误消息.
但是当我用静态形式做同样的事情时,它正在发挥作用. 工作的plunker
对于较旧的角度版本(<1.3.x),动态控件名称和表单验证效果不佳.另外,你有一个非常古老的角度版本(1.0.3).如果您升级到1.3.x版本的角度,您可以通过一些更改轻松实现这一点(其中一些是您需要的):
1)正如@dfsq所提到的,你需要为ng-required绑定范围属性提供一个布尔值,否则你最终会向控件设置truthy"true"/"false",它将完成所需的一切.
2)ng-attr-name用于提供插值动态名称.它会自动扩展为name属性.
3)使用1.3 表单控制器在$error.required属性上设置一个与控件名称相同的属性,并且它会填充一些更特殊的属性.您始终可以跟踪所需错误的总数form.$error.$required.length
4)不要使用索引来设置ng-model,使用适当的属性名称本身,使其更易读,更易于管理.
5)您还可以利用一次性绑定(::)来避免不需要的监视,示例字段名称,显示名称,必需属性(如果它们是非更改列表).
6)您可以使用表单控制器的特殊属性来根据需要管理验证和其他行为和交互.这是一个示例演示,它只使用了控制器提供的一小部分形式.
视图:
<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>
控制器:
/* 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;
}
};
示例演示
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>| 归档时间： |
|
| 查看次数： |
2101 次 |
| 最近记录： |