AngularJS: क्या यह निर्धारित करने का कोई तरीका है कि कौन से फ़ील्ड किसी फ़ॉर्म को अमान्य बना रहे हैं?

94

मेरे पास AngularJS एप्लिकेशन में एक कंट्रोलर के अंदर निम्न कोड है, जिसे एनजी-सबमिट फ़ंक्शन से कहा जाता है, जो नाम के साथ एक फॉर्म से संबंधित है profileForm:

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

इस फ़ंक्शन के अंदर, क्या यह पता लगाने का कोई तरीका है कि कौन से फ़ील्ड पूरे फ़ॉर्म को अमान्य कह रहे हैं?

validation angularjs

— GSto
स्रोत

92

प्रत्येक इनपुट 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=preview के साथ खेलने का प्लंकर है

— उमुर कोंटाकी
स्रोत

5

मेरे जाल में गिरने वाले अन्य लोगों को चेतावनी - आपको nameइसे $ नाम (निश्चित रूप से) में देखने के लिए इनपुट की विशेषता निर्दिष्ट करनी होगी । तथ्य यह है कि AngularJS एक नाम की आवश्यकता के बिना एक मॉडल संपत्ति के लिए बाध्य करता है जिसके परिणामस्वरूप यह निदान करना मुश्किल हो सकता है कि कौन सा इनपुट अमान्य है।

— बर्नहार्ड हॉफमैन

यह निर्धारित करने के लिए $ स्कोप ऑब्जेक्ट का उपयोग करने का संकेत कि कौन से फ़ील्ड एक फ़ॉर्म को अमान्य बना रहे हैं, जिससे मुझे मदद मिली।

— राम

26

जाँच के लिए कि किस क्षेत्र का फॉर्म अमान्य है

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

यह फॉर्म के अमान्य फ़ील्ड्स के सरणी को आउटपुट करेगा

— शिवर परमार
स्रोत

15

यदि आप यह देखना चाहते हैं कि आपकी मान्यता के साथ कौन से क्षेत्र गड़बड़ कर रहे हैं और आपके पास jQuery है, तो बस जावास्क्रिप्ट कंसोल पर "एनजी-अमान्य" वर्ग की खोज करें ।

$('.ng-invalid');

यह उन सभी DOM तत्वों को सूचीबद्ध करेगा जो किसी भी कारण से सत्यापन में विफल रहे।

— थससे संतोस
स्रोत

12

आप के माध्यम से पाश कर सकते हैं form.$error.pattern।

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

— zs2020
स्रोत

2

इसने मेरे लिए काम किया, केवल फॉर्म के बजाय। $ error.pattern, मैंने फॉर्म का उपयोग किया। $ एरर।आधारित। कोई "पैटर्न" गुण नहीं है। क्या वह बदल गया या कुछ और?

— एंथोनी

3

@Anthony जो सत्यापन प्रकार पर निर्भर करती है =) वर्षofmoo.com/2014/09/… को

— oCcSking

2

जब कोई भी फ़ील्ड अमान्य है, यदि आप उसका मान प्राप्त करने का प्रयास करते हैं, तो यह होगा undefined।

कहते हैं कि आपके पास एक पाठ इनपुट जुड़ा हुआ है $scope.mynumजो केवल तभी मान्य होता है जब आप नंबर टाइप करते हैं, और आपने उस पर टाइप ABCकिया है।

यदि आप मूल्य प्राप्त करने की कोशिश करते हैं $scope.mynum, तो यह होगा undefined; यह वापस नहीं आएगा ABC।

(शायद आप यह सब जानते हैं, लेकिन वैसे भी)

इसलिए, मैं एक ऐसे सरणी का उपयोग करूंगा, जिसमें वे सभी तत्व हैं, जिन्हें सत्यापन की आवश्यकता है जो मैंने दायरे में जोड़ दिए हैं और एक फिल्टर का उपयोग करें (उदाहरण के लिए अंडरस्कोर। जेएस) यह जांचने के लिए कि कौन से वापस आते हैं typeof undefined।

और वे क्षेत्र अमान्य राज्य के कारण होंगे।

— क्रिस-l
स्रोत

1

उपयोग किए गए सत्यापन के आधार पर (उदाहरण के लिए कस्टम सत्यापनकर्ता) मॉडल अमान्य होने पर हमेशा अपरिभाषित नहीं हो सकता है।

— स्टिव्यू

@ स्टेवी हम्म, यह बहुत सच है। मुझे लगता है कि यह हर एक मामले पर काम नहीं करता है। ^ _ ^

— क्रिस-

2

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

नोट: अपने फॉर्म में फ़ील्ड में नाम की संपत्ति जोड़ना याद रखें

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

— सेबस्टियन कैस्टल्डी
स्रोत

2

मेरे आवेदन के लिए मैं इस तरह त्रुटि प्रदर्शित करता हूं:

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

यह अच्छी तरह से स्वरूपित नहीं है, लेकिन आप इन चीजों को वहां देखेंगे ...

— गड़बड़
स्रोत

1

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

— ozanmut
स्रोत