angualrjs,使用ng-repeat,ng-form嵌套在表单下找到重复的输入验证

时间:2015-05-18 09:11:37

标签: angularjs angularjs-ng-form

我正在尝试在文本框中找到重复值,检查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;               
        }                        
    }
}

2 个答案:

答案 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;

        }

    }
}