Angularjs গতিশীল এনজি-প্যাটার্ন বৈধতা

Question 1

আমার একটি ফর্ম রয়েছে যে চেকবক্সটি মিথ্যা হলে এনজি-প্রয়োজনীয় নির্দেশিকা ব্যবহার করে কোনও পাঠ্য ইনপুটটিতে বৈধতা প্রয়োগ করে। যদি চেকবাক্সটি সত্য হয় তবে ক্ষেত্রটি লুকানো আছে এবং এনজি-প্রয়োজনীয়টি মিথ্যাতে সেট করা আছে।

সমস্যাটি হ'ল আমার কাছে এনজি-প্যাটার্ন কৌনিক নির্দেশকে পাশাপাশি ইনপুটটিতে নির্দিষ্ট করা বৈধতার জন্য একটি রেজিেক্সও রয়েছে ge আমি যে সমস্যাটি চালিয়ে যাচ্ছি তা হ'ল যদি কোনও ব্যবহারকারী কোনও অবৈধ ফোন নম্বর পূরণ করে তবে সেই ইনপুটটি নিষ্ক্রিয় করতে বাক্সটি চেক করে (এবং ফলস্বরূপ আরও কোনও বৈধকরণের প্রয়োজন নেই) ফর্মটি জমা দেওয়ার অনুমতি দেবে না কারণ এটি এনজি-প্যাটার্নের ভিত্তিতে অবৈধ।

আমি ইনপুট মডেলটি শূন্য করতে একটি এনজি-পরিবর্তন ফাংশন যোগ করে এই সমস্যাটি সমাধান করার চেষ্টা করেছি, তবে এনজি-প্যাটার্ন এবং এইভাবে ক্ষেত্রটি এখনও চেকবক্সের প্রাথমিক সেটটিতে অকার্যকর হিসাবে সেট করা আছে। যদি আমি বাক্সটি চেক না করে, সমস্ত কিছু প্রাথমিক ফর্ম লোডে সেট করে রাখি, তবে বাক্সটি আবার চেক করুন, ফর্মটি বৈধ এবং জমা দিতে সক্ষম। আমি কী অনুপস্থিত তা নিশ্চিত নই। এখানে আমি এ পর্যন্ত এনজি-চেঞ্জ কোডটি দিচ্ছি:

    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ক্ষেত্রের বৈশিষ্ট্যটি পর্যবেক্ষণ করা এবং রিজেএক্সএক্সপিপি সহ যাচাই করার সময় অ্যাকাউন্টে নেওয়া, অর্থাত্ যদি ক্ষেত্রের প্রয়োজন না হয় 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);
        }
    };
})();

এবং এইচটিএমএলে কোনও পরিবর্তনের প্রয়োজন হবে না:

<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

আমি ঠিক এই দিন ছুটেছি।

আমি যা করেছি, যা উপরের চেয়ে সহজ বলে মনে হচ্ছে তা হল স্কোপটিতে একটি ভেরিয়েবলের উপর প্যাটার্ন সেট করা এবং ভিউতে এনজি-প্যাটার্নে এটি উল্লেখ করা।

যখন "চেকবাক্সটি চেক করা নেই" আমি অনিকঞ্জড কলব্যাকে (/ যদি চেক না করে চলেছি) কেবলমাত্র রেগেক্স মানটি /.* / এ সেট করি। এনজি-প্যাটার্ন চয়ন করে যা পরিবর্তিত হয় এবং বলে "ঠিক আছে, আপনার মান ঠিক আছে"। ফর্ম এখন বৈধ। আমি ক্ষেত্র থেকে খারাপ ডেটাও সরিয়ে ফেলব যাতে আপনার কাছে আপাতত খারাপ ফোন # না বসে থাকে।

এনজিও-র প্রয়োজনে আমার অতিরিক্ত সমস্যা ছিল এবং একই জিনিসটি করেছি। কবজির মতো কাজ করেছেন।

Question 7

এনটমোডেল $ ভিউভ্যালিউটি অ্যাট্রিবিউটের মানতে দেওয়া কৌণিক এক্সপ্রেশনকে মূল্যায়ন করে পাওয়া কোনও রেজইপেক্সের সাথে মেলে না যদি প্যাটার্ন বৈধতা ত্রুটি কী সেট করে। যদি অভিব্যক্তিটি কোনও রেজিপ্লেক্স অবজেক্টের মূল্যায়ন করে, তবে এটি সরাসরি ব্যবহৃত হয়। যদি অভিব্যক্তিটি কোনও স্ট্রিংয়ে মূল্যায়ণ করে তবে ^ এবং $ অক্ষরগুলিতে মোড়ানো পরে এটি একটি 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>

জেএস

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

প্লাঙ্কার

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 গতিশীল এনজি-প্যাটার্ন বৈধতা

বিশদ

মন্তব্য