Angularjs 다이내믹 ng 패턴 검증

Angularjs 다이내믹 ng 패턴 검증

체크박스가 false일 경우 ng-required 디렉티브를 사용하여 텍스트 입력에 검증을 시행하는 폼이 있습니다.체크박스가 true일 경우 필드는 숨겨지고 ng-required는 false로 설정됩니다.

문제는 ng-pattern angle 디렉티브를 사용하여 입력에 지정된 검증용 regex도 가지고 있다는 것입니다.문제는 사용자가 비활성 전화번호를 입력한 경우 입력이 비활성화되기 때문에(따라서 더 이상의 검증은 필요하지 않음) 이 폼은 ng-pattern에 따라 비활성화되므로 전송이 허용되지 않는다는 것입니다.

ng-change 함수를 추가하여 입력 모델을 null로 설정하려고 했지만, 체크박스의 초기 설정에서 ng-pattern과 필드는 여전히 false로 설정되어 있습니다.그러나 이 체크박스를 끄고 모든 것을 초기 폼 로드로 되돌린 후 다시 체크박스를 켜면 폼은 유효하고 송신할 수 있습니다.내가 뭘 놓쳤는지 모르겠어.지금까지 가지고 있는 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;
        }
    };

이것은 복잡한 각도 검증이라는 흥미로운 문제입니다.다음 바이올린은 사용자가 원하는 기능을 구현합니다.

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

세부 사항

디렉티브를 했습니다.rpatternAngular, Angular's, Angular's를 ng-required 및ng-pattern로 쓰다input[type=text]은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★required할 때 하지 않은 를 "regexp"로 지정합니다.valid-pattern.

메모들

• 대부분의 코드는 앵글의 것으로, 필요에 따라 조정됩니다.
• 이 체크박스를 켜면 필드가 필수입니다.
• 필수 체크박스가 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() the the 、 the the the the the 、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>

두 번째 입력에 주의하십시오.를 사용하여 폼의 렌더링과 검증을 제어할 수 있습니다.이 경우,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 콜백에서 regex 값을 /.*/로 설정합니다(체크박스가 꺼진 경우).ng-pattern은 변경 내용을 선택하여 "OK, your value are fine"이라고 말합니다.양식이 유효하게 되었습니다.또, 필드내의 불량 데이터를 삭제해, 불량 전화 번호가 표시되지 않게 할 수도 있습니다.

ng-required에 대한 추가 문제가 있어 동일한 작업을 수행했습니다.마법처럼 작동했어.

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

이 질문에서 가장 많이 투표된 답변은 업데이트해야 할 것 같습니다. 왜냐하면 제가 시도해도 해당되지 않기 때문입니다.test기능 및 검증이 작동하지 않습니다.

Angular docs의 예제가 도움이 됩니다.

빌트인 검증자 수정

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}"

언급URL : https://stackoverflow.com/questions/18900308/angularjs-dynamic-ng-pattern-validation