ng-pattern Angularjsを使用した動的検証

Question

ドロップダウンから選択した値に基づいて入力に対して検証を実行しようとしています。

JSFiddle: https://jsfiddle.net/Raj_13290/qqLnqw3f/9/ 

ドロップダウンの変更時のng-patternの値を変更しています。検証は正常に機能しますが、ドロップダウンの値を変更すると、以前に入力された値が検証されません。

たとえば、ドロップダウンで通貨を選択し、 'abc'というテキストを入力して検証するようにすると、ドロップダウンをテキストに変更すると無効な値が表示されます。

私はAngularのより高いバージョンでうまく動作しようとしましたが、1.2.23ではうまくいきません。

いずれの解決策もありがとうございます。ありがとう

Answer 1

角度バグと思われます。

解決策が見つかりましたが、あまり良くありません。

ライブサンプルはjsfiddleです。あなたが新しいバージョンとして、古いバージョン `1.2.23`に滞在したかった理由

var myApp = angular.module('myApp', []); 
 

 
myApp.controller("MyCtrl", function($scope) { 
 
    var tThis = this; 
 
    $scope.dataTypeList = [{ 
 
    'id': 1, 
 
    "label": "Currency" 
 
    }, { 
 
    'id': 2, 
 
    "label": "Number" 
 
    }, { 
 
    'id': 3, 
 
    "label": "Text" 
 
    }]; 
 
    $scope.dataTypeValue; 
 
    $scope.textValue = { 
 
    text: "" 
 
    }; 
 
    $scope.customPattern = /.*/; 
 
    $scope.getCustomPattern = function(pInput) { 
 
    if (!$scope.dataTypeValue) 
 
     return $scope.customPattern; 
 
    var dataTypeId = $scope.dataTypeValue.id; 
 
    if (dataTypeId === 1) { 
 
     $scope.customPattern = /^\d{1,10}$/; 
 
    } else if (dataTypeId === 2) { 
 
     $scope.customPattern = /^\d+$/; 
 
    } else if (dataTypeId === 3) { 
 
     $scope.customPattern = /^.*$/; 
 
    } 
 
    if (!$scope.getCustomPattern.isParser) { 
 
     $scope.getCustomPattern.isParser = true; 
 
     pInput.$setViewValue(pInput.$viewValue); 
 
    } else { 
 
     $scope.getCustomPattern.isParser = false; 
 
    } 
 
    return $scope.customPattern; 
 
    }; 
 
});

input.ng-invalid { 
 
    border-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <ng-form name="MyForm"> 
 

 
     <h3> 
 
    With dynamic pattern 
 
    </h3> 
 
     <select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern(MyForm.input)"> 
 

 
     </select> 
 

 
     <input type="text" ng-model="textValue.text" ng-pattern="getCustomPattern(MyForm.input)" ng-model-options="{allowInvalid:true}" name="input"> 
 
     <br> 
 
     <br> 
 
     <br>Data type: {{dataTypeValue}} 
 
     <br>Entered value: {{textValue}} 
 

 
    </ng-form> 
 
    </div> 
 
</div>

Answer 2

ng-patternに基づいてCSSクラスを更新しないようにしてください。詳細には行っていませんが、この計画はあなたを助けるかもしれません。

https://plnkr.co/edit/JSgH3LZHQysIO71u03yF?p=preview

var myApp = angular.module('myApp', []); 
myApp.controller("MyCtrl", function ($scope) { 
var tThis = this; 
$scope.dataTypeList = [{ 
     'id' : 1, 
     "label" : "Currency" 
    }, { 
     'id' : 2, 
     "label" : "Number" 
    }, { 
     'id' : 3, 
     "label" : "Text" 
    } 
]; 
$scope.dataTypeValue; 
$scope.textValue 
$scope.customPattern = ''; 
$scope.className = "ng-invalid ng-invalid-pattern" 
    $scope.setCustomPattern = function() { 
    var dataTypeId = $scope.dataTypeValue.id; 
    console.log(dataTypeId + 'llsdkfalskdf'); 
    if (dataTypeId === 1) { 
     $scope.customPattern = /^\d{1,10}$/; 
    } else if (dataTypeId === 2) { 
     $scope.customPattern = /^\d+$/; 
    } else if (dataTypeId === 3) { 
     $scope.customPattern = /^.*$/; 
    } 
    return $scope.customPattern 
}; 
$scope.$watch("[dataTypeValue, textValue]", function (nw, old) { 
    var s = $('input[name=input]').val() 
     $scope.textValue = s; 
    var pattern = $scope.setCustomPattern() 
     if (pattern.test($scope.textValue)) { 
      $scope.className = "ng-valid ng-valid-pattern" 
     } else { 
      $scope.className = "ng-invalid ng-invalid-pattern" 
     } 
}); 

});