[angularjs] Angularjs 동적 ng- 패턴 유효성 검사

Program / 글쓴이

확인란이 거짓이면 ng-required 지시문을 사용하여 텍스트 입력에 대한 유효성 검사를 시행하는 양식이 있습니다. 확인란이 true이면 필드가 숨겨지고 ng-required가 false로 설정됩니다.

문제는 또한 ng-pattern 각도 지시문을 활용하여 입력에 지정된 유효성 검사를위한 정규식이 있다는 것입니다. 내가 겪고있는 문제는 사용자가 잘못된 전화 번호를 입력하고 해당 입력을 비활성화하는 확인란을 선택하면 (결과적으로 추가 유효성 검사가 필요하지 않음) 양식이 ng 패턴을 기반으로 유효하지 않기 때문에 제출을 허용하지 않는다는 것입니다.

입력 모델을 null로 설정하는 ng-change 함수를 추가하여이 문제를 해결하려고 시도했지만 ng-pattern 및 따라서 필드는 확인란의 초기 설정에서 여전히 유효하지 않은 것으로 설정되어 있습니다. 그러나 상자를 선택 취소하고 모든 것을 초기 양식로드로 설정 한 다음 상자를 다시 선택하면 양식이 유효하고 제출할 수 있습니다. 내가 무엇을 놓치고 있는지 잘 모르겠습니다. 지금까지 내가 가지고있는 ng-change 코드는 다음과 같습니다.

    var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    $scope.phoneNumberPattern = phoneNumberRegex;
    $scope.removeValidation = function() {
        if ($scope.cell._newUser === false) {
            $scope.request._number = '';
            $scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
        } else {
            $scope.phoneNumberPattern = phoneNumberRegex;
        }
    };

답변

이것은 흥미로운 문제입니다. 복잡한 Angular 유효성 검사입니다. 다음 바이올린은 원하는 것을 구현합니다.

http://jsfiddle.net/2G8gA/1/

세부

나는 새로운 지침 작성, rpattern각도의의 혼합이다, ng-required과 ng-pattern에서 코드를 input[type=text]. 그것이하는 일은 required필드 의 속성을 관찰하고 regexp로 검증 할 때이를 고려하는 것입니다. 즉, 필수가 아닌 경우 필드를 valid-pattern.

메모

  • 대부분의 코드는 Angular에서 가져 왔으며 이에 맞게 조정되었습니다.
  • 확인란을 선택하면 필드가 필요합니다.
  • 필수 확인란이 false이면 필드가 숨겨지지 않습니다.
  • 데모에서는 정규식이 단순화되었습니다 (유효한 3 자리).

더러운 새 지침을 원하지 않는 경우 (그러나 작은) 솔루션은 다음과 같을 것이다 :

$scope.phoneNumberPattern = (function() {
    var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    return {
        test: function(value) {
            if( $scope.requireTel === false ) {
                return true;
            }
            return regexp.test(value);
        }
    };
})();

그리고 HTML에서는 변경이 필요하지 않습니다.

<input type="text" ng-model="..." ng-required="requireTel"
    ng-pattern="phoneNumberPattern" />

이 사실은 전화로 각 트릭 우리의 test() 방법을 대신 RegExp.test()소요 required계정으로.

답변

Nikos의 굉장한 대답에서 아무것도 빼앗지 않고 아마도 이것을 더 간단하게 할 수 있습니다.

<form name="telForm">
  <input name="cb" type='checkbox' data-ng-modal='requireTel'>
  <input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/>
  <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
</form>

두 번째 입력에주의하십시오.를 사용하여 ng-if양식의 렌더링 및 유효성 검사를 제어 할 수 있습니다 . 경우 requireTel변수가 설정되지, 두 번째 입력은 숨길 수 없습니다 만, 전혀 렌더링되지 것입니다, 따라서 양식 유효성 검사를 통과하고 버튼이 활성화 될 것입니다, 당신은 당신이 필요로하는 것을 얻을 수 있습니다.

답변

사용 된 패턴 : 

 ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"

사용 된 참조 파일 :

 '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>'

입력 예 :

 <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">

답변

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">

스 니펫 확장

답변

나는 요 전에 이것을 만났다.

위보다 쉬운 것처럼 보이는 것은 스코프의 변수에 패턴을 설정하고 뷰에서 ng-pattern으로 참조하는 것입니다.

“체크 박스가 선택 해제 된 경우”onChanged 콜백에서 정규식 값을 /.*/로 설정하기 만하면됩니다 (선택하지 않은 경우). ng-pattern은 변경되는 항목을 선택하고 “OK, your value is fine”이라고 말합니다. 이제 양식이 유효합니다. 나는 또한 현장에서 잘못된 데이터를 제거하여 거기에 앉아있는 명백한 불량 전화가 없도록합니다.

나는 ng-required와 관련된 추가 문제가 있었고 같은 일을했습니다. 매력처럼 작동했습니다.

답변

ngModel $ viewValue가 속성 값에 주어진 Angular 표현식을 평가하여 찾은 RegExp와 일치하지 않는 경우 패턴 유효성 검사 오류 키를 설정합니다. 표현식이 RegExp 객체로 평가되면 직접 사용됩니다. 표현식이 문자열로 평가되면 ^ 및 $ 문자로 래핑 한 후 RegExp로 변환됩니다.

이 질문에서 가장 많이 투표 한 답변은 업데이트해야하는 것 같습니다. 시도 할 때 test기능이 적용되지 않고 유효성 검사가 작동 하지 않기 때문 입니다.

에서 예 각도 문서는 나를 위해 잘 작동합니다 :

내장 유효성 검사기 수정

HTML

<form name="form" class="css-form" novalidate>
  <div>
   Overwritten Email:
   <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
   <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
   Model: {{myEmail}}
  </div>
</form>

js

var app = angular.module('form-example-modify-validators', []);

app.directive('overwriteEmail', function() {
    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

    return {
        require: 'ngModel',
        restrict: '',
        link: function(scope, elm, attrs, ctrl) {
            // only apply the validator if ngModel is present and Angular has added the email validator
            if (ctrl && ctrl.$validators.email) {

                // this will overwrite the default Angular email validator
                ctrl.$validators.email = function(modelValue) {
                    return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                };
             }
         }
     };
 });

플 런커

답변

https://regex101.com/ 사이트를 사용 하여 일부 국가에 대한 고유 한 패턴을 구축 할 수 있습니다 .

예 : 폴란드 :

-pattern = xxxxxxxxx OR xxx-xxx-xxx OR xxx xxx xxx
-regexp ="^\d{9}|^\d{3}-\d{3}-\d{3}|^\d{3}\s\d{3}\s\d{3}"