问题描述
限时送ChatGPT账号..我有几个想要动态复制的字段.我正在使用 ng-reapt 来完成这项工作.但是,验证消息不起作用.这是我所拥有的:
<头><title>teste</title>头部><body ng-controller='testController'><label>工人数量</label><选择 ng-model="数量" ng-change="changed()"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option></选择>
有没有办法使用索引位置来显示和验证字段?
frm.firstName.$error.minlength
上面的代码适用于第一个块,但它向所有副本显示消息.
解决方案我认为这与您想要实现的目标一致:
http://plnkr.co/edit/HVwnRfvt30WrsteY6DvW
我们需要通过使用ngRepeat
的$index
为每个输入字段分配一个动态的name
:
并且基于array
中的条目数量,我们可以使用以下语法在循环中访问每个动态创建的someField
:
form['someField' + $index]
在你的例子中,假设我们有三个工人,第二个工人的 firstName
无效——在 ngRepeat
中,它看起来像这样:
已验证?-->form.firstName{{$index}}.$valid = {{form['firstName' + $index].$valid}}
输出:
有效吗?-->form.firstName0.$valid = true已验证?-->form.firstName1.$valid = false已验证?-->form.firstName2.$valid = true
I have a couple of fields that I would like to replicate dynamically. I'm using ng-reapt which is doing the job. However, the validation messages are not working. Here's what I've got:
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<label>Number of Workers</label>
<select ng-model="quantity" ng-change="changed()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form name='frm' action='/workers/add' method='POST'>
<div ng-repeat="i in numberOfWorkers track by $index">{{$index + 1}}
<div>
<label>First Name</label>
<input class="fullSize" letters-only placeholder="Please enter your name" type="text" name="firstName" ng-model="workers[$index].firstName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.firstName)">
<small class="error" ng-show="frm.firstName[{{$index}}].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.maxlength">* No more than 50 chars.</small>
</span>
</div>
<div>
<label>Surname</label>
<input class="fullSize" letters-only placeholder="Please enter your surname" type="text" name="surName" ng-model="workers[$index].surName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.surName)">
<small class="error" ng-show="frm.surName[$index].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.surName[$index].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.surName[$index].$error.maxlength">* No more than 50 chars.</small>
</span>
</div>
<div>
<label>Email</label>
<input class="grid-full" placeholder="Please enter your e-mail" type="email" name="email" ng-model="workers[$index].email" ng-minlength="3" ng-maxlength="50" required maxlength="50">
<span class="error-container" ng-show="submitted || showErrors(frm.email)">
<small class="error" ng-show="frm.email[$index].$error.required">* Please enter your E-mail.</small>
<small class="error" ng-show="frm.email[$index].$error.email">* Invalid email.</small>
</span>
</div>
</div>
</form>
<button ng-click="test()">test</button>
<script src="https://ajax.googleapis/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.submitted = false;
$scope.numberOfWorkers = [1];
$scope.workers = [];
$scope.getNumber = function (num) {
return new Array(num);
};
$scope.test = function(){
console.log($scope.workers);
};
$scope.changed = function() {
$scope.workers = [];
$scope.numberOfWorkers = new Array(parseInt($scope.quantity));
}
$scope.isUndefined = function (thing) {
var thingIsUndefined = (typeof thing === "undefined");
return thingIsUndefined;
};
$scope.showErrors = function (field) {
var fieldIsUndefined = $scope.isUndefined(field);
if (fieldIsUndefined == false)
{
var stateInvalidIsUndefined = $scope.isUndefined(field.$invalid);
var stateDirtyIsUndefined = $scope.isUndefined(field.$dirty);
return (fieldIsUndefined == false && stateInvalidIsUndefined == false && stateDirtyIsUndefined == false &&
(field.$invalid && field.$dirty));
}
return false;
};
}]);
</script>
</body>
</html>
Is there a way to display and validate fields using the index position?
frm.firstName.$error.minlength
The code above works for the first block, but it display the message to all copies.
解决方案I think this along the lines of what you're trying to achieve:
http://plnkr.co/edit/HVwnRfvt30WrsteY6DvW
We need to assign a dynamic name
to each input field, by way of using the $index
of the ngRepeat
:
<form name="form">
<div ng-repeat="entry in array track by $index">
<input type="text" name="someField{{$index}}">
<div>
</form>
And based on the number of entries in array
, we can access in a loop each dynamically created someField
using the syntax below:
form['someField' + $index]
In your case, let's say we have three workers, and the second worker's firstName
is invalid -- in an ngRepeat
, it would look like this:
<div ng-repeat="i in numberOfWorkers track by $index">
isValid? --> form.firstName{{$index}}.$valid = {{form['firstName' + $index].$valid}}
</div>
Output:
isValid? --> form.firstName0.$valid = true
isValid? --> form.firstName1.$valid = false
isValid? --> form.firstName2.$valid = true
这篇关于使用索引位置验证字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论