Angularjs गतिशील एनजी-पैटर्न सत्यापन

Question 1

मेरे पास एक फॉर्म है कि अगर कोई चेकबॉक्स गलत है तो एनजी-आवश्यक निर्देश का उपयोग करके एक पाठ इनपुट पर सत्यापन लागू करता है। यदि चेकबॉक्स सही है, तो फ़ील्ड छिपा हुआ है और एनजी-आवश्यक गलत पर सेट है।

समस्या यह है कि मेरे पास इनपुट पर निर्दिष्ट सत्यापन के लिए एक रेगेक्स भी है और साथ ही एनजी-पैटर्न कोणीय निर्देश का उपयोग कर रहा है। मैं जिस मुद्दे पर चल रहा हूं, वह यह है कि यदि कोई उपयोगकर्ता किसी अमान्य फ़ोन नंबर को भरता है, तो उस इनपुट को निष्क्रिय करने के लिए बॉक्स की जांच करता है (और इसके बाद उसे और सत्यापन की आवश्यकता नहीं है) फॉर्म जमा करने की अनुमति नहीं देगा क्योंकि यह एनजी-पैटर्न के आधार पर अमान्य है।

मैंने इनपुट मॉडल को शून्य पर सेट करने के लिए एक एनजी-परिवर्तन फ़ंक्शन जोड़कर इस मुद्दे को हल करने का प्रयास किया, हालांकि एनजी-पैटर्न और इस प्रकार फ़ील्ड अभी भी चेकबॉक्स के प्रारंभिक सेट पर गलत करने के लिए अमान्य है। यदि मैं बॉक्स को अनचेक करता हूं, तो प्रारंभिक फॉर्म लोड पर सब कुछ वापस सेट कर रहा हूं, फिर बॉक्स को फिर से जांचें, फॉर्म वैध है और सबमिट करने में सक्षम है। मुझे यकीन नहीं है कि मैं क्या याद कर रहा हूँ। इस प्रकार एनजी-चेंज कोड मेरे पास इस प्रकार है:

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

Question 2

यह एक दिलचस्प समस्या है, जटिल कोणीय सत्यापन। निम्नलिखित आप क्या चाहते हैं पर लागू होता है:

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

विवरण

मैंने एक नया निर्देश बनाया rpattern, जो कि एंगुलर ng-requiredऔर ng-patternकोड का मिश्रण है input[type=text]। यह requiredक्षेत्र की विशेषता को देखता है और regexp के साथ सत्यापन करते समय इसे ध्यान में रखता है, अर्थात यदि आवश्यक नहीं है तो फ़ील्ड को चिह्नित करें valid-pattern।

अधिकांश कोड कोणीय से है, इस की आवश्यकताओं के अनुरूप।
जब चेकबॉक्स की जाँच की जाती है, तो फ़ील्ड आवश्यक है।
आवश्यक चेकबॉक्स गलत होने पर फ़ील्ड छिपाया नहीं जाता है।
डेमो के लिए नियमित अभिव्यक्ति सरल है (मान्य 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खाते में ले जाता है।

Question 3

निकोस के भयानक जवाब से कुछ भी दूर नहीं, शायद आप इसे और अधिक सरलता से कर सकते हैं:

<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वैरिएबल परेशान है, तो दूसरा इनपुट न केवल छिपा हुआ होगा, बल्कि उसे बिल्कुल भी रेंडर नहीं किया जाएगा, इस प्रकार फॉर्म वैलिडेशन पास होगा और बटन एनेबल हो जाएगा, और आपको वह मिलेगा जो आपको चाहिए।

Question 4

प्रयुक्त पैटर्न:

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

Question 5

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

स्निपेट का विस्तार करें

Question 6

मैं बस दूसरे दिन इस में भाग गया।

मैंने जो किया, जो ऊपर से ज्यादा आसान लगता है, वह है कि पैटर्न को दायरे पर एक चर पर सेट करें और इसे दृश्य में एनजी-पैटर्न में देखें।

जब "चेकबॉक्स अनियंत्रित होता है" तो मैं ऑनकेन्स्ड कॉलबैक (यदि अनियंत्रित होने जा रहा हूं) पर regex मान को /.*/ पर सेट करता हूं। एनजी-पैटर्न चुनता है जो बदल जाता है और कहता है "ठीक है, आपका मूल्य ठीक है"। फॉर्म अब मान्य है। मैं मैदान से खराब डेटा को भी हटा दूंगा ताकि आपके पास एक स्पष्ट बुरा फोन न हो।

मेरे पास गैर-आवश्यक के आसपास अतिरिक्त मुद्दे थे, और वही काम किया। एक जादू की तरह काम किया।

Question 7

पैटर्न वैलिडेशन एरर की को सेट करता है यदि एनजीएमडेल $ viewValue विशेषता मूल्य में दिए गए कोणीय अभिव्यक्ति का मूल्यांकन करके एक RegExp से मेल नहीं खाता है। यदि अभिव्यक्ति एक RegExp ऑब्जेक्ट का मूल्यांकन करता है, तो यह सीधे उपयोग किया जाता है। यदि अभिव्यक्ति एक स्ट्रिंग का मूल्यांकन करती है, तो इसे ^ और $ वर्णों में लपेटने के बाद एक RegExp में बदल दिया जाएगा।

ऐसा लगता है कि इस प्रश्न में सबसे अधिक वोट किए गए उत्तर को अपडेट किया जाना चाहिए, क्योंकि जब मैं इसे आज़माता हूं, तो यह testफ़ंक्शन और सत्यापन काम नहीं करता है।

कोणीय डॉक्स से उदाहरण मेरे लिए अच्छा काम करता है:

अंतर्निहित सत्यापनकर्ताओं को संशोधित करना

एचटीएमएल

<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);
                };
             }
         }
     };
 });

Plunker

Question 8

आप किसी देश के लिए अपना विशिष्ट पैटर्न बनाने के लिए साइट 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}"

Angularjs गतिशील एनजी-पैटर्न सत्यापन

विवरण

टिप्पणियाँ