কৌণিক জেএস: কোন ক্ষেত্রগুলি ফর্মকে অবৈধ করে দিচ্ছে তা নির্ধারণের কোনও উপায় আছে কি?

Question

কন্ট্রোলারের অভ্যন্তরে আমার একটি কৌনিক জেএস অ্যাপ্লিকেশনটিতে নিম্নলিখিত কোড রয়েছে, যা এনজি-জমা ফাংশন থেকে আহ্বান করা হয়েছে, যা নাম সহ কোনও ফর্মের সাথে সম্পর্কিত profileForm:

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

এই ফাংশনের অভ্যন্তরে, কোন ক্ষেত্রগুলি পুরো ফর্মটি অবৈধ হিসাবে ডেকে আনছে তা বের করার কোনও উপায় আছে?

Answer 1

প্রতিটি ইনপুট nameএর বৈধতা তথ্য সম্পত্তি হিসাবে সম্পত্তি হিসাবে প্রকাশ করা formহয় scope।

এইচটিএমএল

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

জেএস

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

উদ্ভাসিত সম্পত্তি $pristine, $dirty, $valid, $invalid, $error।

যদি আপনি কোনও কারণে ত্রুটিগুলি নিয়ে পুনরাবৃত্তি করতে চান:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

ত্রুটিযুক্ত প্রতিটি নিয়ম $ ত্রুটিতে প্রকাশ করা হবে।

Http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p= পূর্বরূপের সাথে খেলতে এখানে একটি plunkr

Comments

অন্যদের আমার জালে পড়ার বিষয়ে সতর্কতা - আপনাকে ইনপুটটির nameবৈশিষ্ট্যটি অবশ্যই $ নামে (অবশ্যই) দেখতে নির্দিষ্ট করতে হবে । অ্যাংুলারজেএস নামের প্রয়োজন ছাড়াই কোনও মডেলের সম্পত্তিতে আবদ্ধ হওয়ার ফলে কোন ইনপুটটি অবৈধ তা নির্ণয় করা কঠিন হতে পারে।

— বার্নহার্ড হোফম্যান

কোন ক্ষেত্রগুলি কোনও ফর্মকে অবৈধ করছে তা নির্ধারণ করতে to স্কোপ অবজেক্টটি ব্যবহার করার ইঙ্গিতটি আমাকে সহায়তা করেছিল helped

— রাম

Answer 2

কোন ফর্মের ক্ষেত্রটি অবৈধ তা যাচাইয়ের জন্য

console.log($scope.FORM_NAME.$error.required);

এটি ফর্মের অবৈধ ক্ষেত্রগুলির অ্যারে আউটপুট করবে

Answer 3

আপনি যদি দেখতে চান যে কোন ক্ষেত্রগুলি আপনার বৈধতার সাথে গণ্ডগোল করছে এবং আপনাকে সহায়তা করার জন্য jQuery রয়েছে, কেবল জাভাস্ক্রিপ্ট কনসোলে "এনজি-অবৈধ" শ্রেণীর সন্ধান করুন।

$('.ng-invalid');

এটি সমস্ত ডোম উপাদান তালিকাভুক্ত করবে যা কোনও কারণে বৈধতা ব্যর্থ হয়েছে।

Answer 4

আপনি লুপ করতে পারেন form.$error.pattern।

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

Comments

এটি ফর্মের পরিবর্তে আমার পক্ষে কাজ করেছিল $ কোনও "প্যাটার্ন" সম্পত্তি নেই। সে পরিবর্তন হয়েছে নাকি কিছু?

— অ্যান্থনি

@ অ্যান্টনি

— ওসিসিএসকিং

Answer 5

যখন কোনও ক্ষেত্র অবৈধ, আপনি যদি এর মান পাওয়ার চেষ্টা করেন তবে তা হবে undefined।

বলুন যে আপনি এর সাথে সংযুক্ত একটি পাঠ্য ইনপুটটি $scope.mynumবৈধ হবে যখন আপনি সংখ্যা টাইপ ABCকরেন এবং আপনি এটিতে টাইপ করেন।

আপনি যদি এর মান পাওয়ার চেষ্টা করেন $scope.mynumতবে তা হবে undefined; এটা ফিরে না ABC।

(সম্ভবত আপনি এই সব জানেন, তবে যাইহোক)

সুতরাং, আমি এমন একটি অ্যারে ব্যবহার করব যা সমস্ত সুযোগের যাচাইকরণের প্রয়োজন যা আমি সুযোগগুলিতে যুক্ত করেছি এবং কোন ফিল্টারটি ব্যবহার করবে (উদাহরণস্বরূপ আন্ডারস্কোর.জেএস সহ) কোনটি হিসাবে ফিরে আসে তা পরীক্ষা করতে typeof undefined।

এবং সেগুলি হবে অবৈধ রাষ্ট্রের ক্ষেত্র।

Comments

ব্যবহৃত বৈধতার উপর নির্ভর করে (যেমন কাস্টম ভ্যালিডেটর) ​​মডেলটি সর্বদা অবৈধ যখন অপরিজ্ঞাত হয় না।

— স্টিউই

@ স্টেউই হুম হ্যাঁ, এটি খুব সত্য। আমার ধারণা এটি প্রতিটি একক ক্ষেত্রে কাজ করে না। ^ _ ^

— chris-l

Answer 6

আমি অক্ষম সেভ বোতামের সরঞ্জামটিপে সমস্ত ত্রুটিগুলি প্রদর্শন করতে চেয়েছিলাম, যাতে ব্যবহারকারীরা জানতে পারবেন যে দীর্ঘ ফর্মটি উপরে স্ক্রোল করার পরিবর্তে কেন অক্ষম করা হচ্ছে।

দ্রষ্টব্য: আপনার ফর্মের ক্ষেত্রগুলিতে নামের সম্পত্তি যুক্ত করতে মনে রাখবেন

    if (frm) {
        disable = frm.$invalid;
        if (frm.$invalid && frm.$error && frm.$error.required) {
            frm.$error.required.forEach(function (error) {
                disableArray.push(error.$name + ' is required'); 
            });
        }
    }
    if (disableArray.length > 0) {
        vm.disableMessage = disableArray.toString();
    }

Answer 7

আমার অ্যাপ্লিকেশনটির জন্য আমি এ জাতীয় ত্রুটি প্রদর্শন করি:

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

আপনি যদি সমস্ত কিছু দেখতে চান তবে কেবল ব্যবহারকারী 'এরর' যা এরকম কিছু প্রদর্শন করবে:

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

এটি ভাল ফর্ম্যাটেড নয়, আপনি সেখানে এই জিনিসগুলি দেখতে পাবেন ...

Answer 8

আপনি যদি এমন ক্ষেত্র (গুলি) সন্ধান করতে চান যা প্রোগ্রামিয়াতারিভাবে UI- এ ফর্মকে অবৈধ করে দেয়, কেবল ডান ক্লিক পরিদর্শন করুন (উপাদানগুলির দৃশ্যে ওপেন বিকাশকারী সরঞ্জামগুলি) তবে এই ট্যাবের অভ্যন্তরে সিটিআরএল + এফ দিয়ে এনজি-অবৈধ অনুসন্ধান করুন। তারপরে প্রতিটি ক্ষেত্রের জন্য আপনি এনজি-অবৈধ শ্রেণীর সন্ধান করেন, ক্ষেত্রের প্রয়োজনের সময় কোনও মান দেওয়া হয়নি কিনা তা পরীক্ষা করতে পারেন বা অন্যান্য নিয়মগুলি এটি লঙ্ঘন করতে পারে (অবৈধ ইমেল ফর্ম্যাট, পরিসর / সর্বাধিক / মিনিটের সংজ্ঞা ছাড়াই ইত্যাদি) etc. । এই সবচেয়ে সহজ উপায়।