0

ng-change の各入力値をチェックするテキストボックスに入力された重複した値を見つけようとしています。次に、「sos 番号が一致しています」というメッセージを表示します。結果、通常のメッセージ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-変更方法:

$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;               
        }                        
    }
}
4

2 に答える 2

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;

        }

    }
}
于 2015-05-23T05:08:00.987 に答える
0

私があなたを正しく理解していれば、2つのフィールドが同じ値を持っていることを確認したいだけです...パスワードと確認パスワードのように...そのスニペットを貼り付けます（パスワードと確認パスワード用）が、そこから必要なものを手に入れることができます

また、2 つの項目がスコープ内にあるため、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>

提出されたときのチェック用です...必須ではありません

ここでは、2 つのスコープ項目が等しくないかどうかを確認し、それに応じてエラーを表示しています...

コントローラーで必要なのは

$scope.onSubmit = function () {
        $scope.submitted = true;
            if ($scope.createProfileForm.createUserForm.$valid && $scope.user.password === $scope.user.confPassword) {
                $scope.submitted = false;

            }
    }
于 2015-05-21T05:57:10.820 に答える