Angularjs गतिशील एनजी पैटर्न पैटर्न




angularjs-directive angularjs-ng-change (5)

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

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

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

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

पैटर्न प्रमाणीकरण त्रुटि कुंजी सेट करता है यदि ngModel $ 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!#$%&'*+/=?^_`{|}~.-][email protected]\.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


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

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

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

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

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

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

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


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





angularjs-ng-change