我正在尝试在文本框中找到重复值,检查ng-change上的每个输入值。然后显示消息“sos number有匹配”。但是仍然按顺序排序生成列表数据。结果,定期留言jsfiddle 到目前为止,我没有成功。以下是代码。 :
html代码:
<form name="settingForm" ng-submit="mangeDeviceSettings()"><div class="form-group">
<div data-ng-repeat="i in sosLength track by $index">
<ng-form name="sosNumForm">
<span class="input-icon"> <input type="text" ng-disabled="!showPendingStatus" watch-change="change()"
class="form-control" name="SOSNumber" ng-minlength="10" ng-maxlength="13" placeholder="SOSNumber{{$index+1}} No." ng-pattern="/^[0-9]+$/"
ng-model="deviceSettings.sos[$index]" ng-change="sosChange($index,this)">
<i class="fa fa-mobile"></i></span>
<span ng-show="IsMatch{{$index}} && sampleSOS && sosNumForm.SOSNumber.$dirty">SOS Number has a match!</span>
<span ng-show="(sosNumForm.SOSNumber.$error.minlength || sosNumForm.SOSNumber.$error.maxlength) && sosNumForm.SOSNumber.$dirty">Mobile Number must be between 10 and 13 digits </span>
<span ng-show="!sosNumForm.SOSNumber.$error.minlength && !sosNumForm.SOSNumber.$error.maxlength && sosNumForm.SOSNumber.$error.pattern && sosNumForm.SOSNumber.$dirty">Number must contain only numbers</span>
</ng-form>
</div>
</div>
</div></form>
ng-change method:
$scope.sosChange=function(idx, obj){
$scope.sampleSOS = true;
$scope.fnfDuplicate=true;
obj.$parent.settingForm.$valid = obj.sosNumForm.$valid;
// console.log(obj.$parent.settingForm.$valid);
// console.log(obj.sosNumForm.$valid);
console.log($scope.deviceSettings.sos[idx]);
console.log($scope.deviceSettings.sos[i] );
// console.log(obj.sosNumForm.$valid);
// console.log($scope.deviceSettings.sos[idx]!="");
for (var i = 0; i < 3; i++) {
if(idx != i ){
if ($scope.deviceSettings.sos[idx] == $scope.deviceSettings.sos[i]
&& obj.sosNumForm.$valid && $scope.deviceSettings.sos[idx]!="") {
if(idx==0){
$scope.IsMatch0=true; $scope.sosDuplicate=true;
return false;
}
if(idx==1){
$scope.IsMatch1=true; $scope.sosDuplicate=true;
return false;
}
if(idx==2){
$scope.IsMatch2=true; $scope.sosDuplicate=true;
return false;
}
}
else{
if(idx==0){
$scope.IsMatch0=false; $scope.sosDuplicate=false;
return false;
}
if(idx==1){
$scope.IsMatch1=false; $scope.sosDuplicate=false;
return false;
}
if(idx==2){
$scope.IsMatch2=false; $scope.sosDuplicate=false;
return false;
}
}
// $scope.sosDuplicate=true;
}
}
}
答案 0 :(得分:0)
如果我理解正确你只是想要验证两个字段具有相同的值...如密码和确认密码...我会粘贴一个片段(密码和确认密码),但从那里我相信你能得到你需要的东西
我也没有看到需要ngChange,因为这两个项目都在范围内,因此如果它们不相等,你只想进行验证。
<div class="form-group required" ng-class="{ 'has-error' : changePasswordForm.password.$invalid && submitted}">
<label class="col-md-3 control-label">New Password </label>
<div class="col-md-8">
<input class="form-control" name="password" ng-model="user.password" ng-minLength="6" type="password" required>
<p ng-show="changePasswordForm.password.$error.minlength && submitted" class="help-block">Password must be atleast 6 characters long.</p>
<p ng-show="changePasswordForm.password.$error.required && !changePasswordForm.password.$error.minlength && submitted" class="help-block">Password is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : (changePasswordForm.confPassword.$invalid || user.password!== user.confPassword) && submitted}">
<label class="col-md-3 control-label">Confirm password </label>
<div class="col-md-8">
<input class="form-control" name="confPassword" ng-model="user.confPassword" type="password" required>
<p ng-show="changePasswordForm.confPassword.$invalid && submitted" class="help-block">This field is required.</p>
<p ng-show="changePasswordForm.confPassword.$valid && user.password!== user.confPassword && submitted" class="help-block">Passwords must match.</p>
</div>
</div>
并提交用于检查提交时间...不是必需的
所以在这里你看我们检查两个范围项是否不相等,因此我们显示错误......
控制器中的只需
$scope.onSubmit = function () {
$scope.submitted = true;
if ($scope.createProfileForm.createUserForm.$valid && $scope.user.password === $scope.user.confPassword) {
$scope.submitted = false;
}
}
答案 1 :(得分:0)
html代码:
<div class="form-group"> <!-- <div data-ng-repeat="i in sosLength track by $index"> -->
<div data-ng-repeat="i in persons track by $index">
<ng-form name="sosNumForm">
<span class="input-icon"> <input type="text" ng-disabled="!showPendingStatus" watch-change="change()"
class="form-control" name="SOSNumber" ng-minlength="10" ng-maxlength="13" placeholder="SOSNumber{{$index+1}} No." ng-pattern="/^[0-9]+$/"
ng-model="deviceSettings.sos[$index]" ng-change="sosChange(this,deviceSettings.sos[$index])">
<i class="fa fa-mobile"></i></span>
<!-- <span ng-show="IsMatch{{$index}} && sampleSOS && sosNumForm.SOSNumber.$dirty">SOS Number has a match!</span> -->
<span ng-if="i.isDuplicate"> SOS Number has a match!</span>
<span ng-show="(sosNumForm.SOSNumber.$error.minlength || sosNumForm.SOSNumber.$error.maxlength) && sosNumForm.SOSNumber.$dirty">Mobile Number must be between 10 and 13 digits </span>
<span ng-show="!sosNumForm.SOSNumber.$error.minlength && !sosNumForm.SOSNumber.$error.maxlength && sosNumForm.SOSNumber.$error.pattern && sosNumForm.SOSNumber.$dirty">Number must contain only numbers</span>
</ng-form>
</div>
</div>
JS代码:
$scope.sosDuplicate=true;
$scope.fnfDuplicate=true;
$scope.persons = [{sos:""},{sos:""},{sos:""}];
$scope._persons = [{fnf:""},{fnf:""}];
$scope.fnfValid = true;
$scope.sosValid = true;
$scope.sosChange=function(obj,value){
var sorted, i;
var count =0, checker;
// obj.$parent.settingForm.$valid = obj.sosNumForm.$valid;
$scope.sosValid = obj.sosNumForm.$valid;
if(value!="undefined" || value != "")
{
for (var i = 0; i < 3; i++) {
checker = parseInt($scope.deviceSettings.sos[i]);
$scope.persons[i].sos = checker==NaN ? "" : checker;
};
sorted = $scope.persons.concat().sort(function (a, b) {
if (a.sos > b.sos) return 1;
if (a.sos < b.sos) return -1;
return 0;
});
for(i = 0; i < $scope.persons.length; i++) {
sorted[i].isDuplicate = ((sorted[i-1] && sorted[i-1].sos == sorted[i].sos) || (sorted[i+1] && sorted[i+1].sos == sorted[i].sos)
|| (sorted[i+2] && sorted[i+2].sos == sorted[i].sos)|| (sorted[i-2] && sorted[i-2].sos == sorted[i].sos));
if(sorted[i].isDuplicate==true){
count+=1;
console.log(count);
}
$scope.sosDuplicate= (count>1) ? true : false;
}
}
}