कोणीय 4 प्रतिक्रियाशील रूप में अमान्य नियंत्रण कैसे खोजें

Question

मेरे पास नीचे की तरह कोणीय में एक प्रतिक्रियाशील रूप है:

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

यह .AddCustomerForm.valid गलत है, लेकिन सब कुछ अच्छा लगता है।

मैंने नियंत्रण संग्रह में स्थिति की संपत्ति की जांच के साथ खोजने की कोशिश की है। लेकिन मुझे आश्चर्य है कि क्या अवैध तरीके खोजने और उपयोगकर्ता को प्रदर्शित करने का कोई तरीका है?

Comments

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

— LookForAngular

Answer 1

आप बस हर नियंत्रण पर पुनरावृति कर सकते हैं और स्थिति की जांच कर सकते हैं:

    public findInvalidControls() {
        const invalid = [];
        const controls = this.AddCustomerForm.controls;
        for (const name in controls) {
            if (controls[name].invalid) {
                invalid.push(name);
            }
        }
        return invalid;
    }

Comments

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

— sa_

आपको क्या findInvalidControls()लौटाता है?

— मैक्स कोरसेटस्की

यह कुछ भी नहीं लौटाता, अमान्य खाली है। मैंने डिबग वॉच स्क्रीन में एक-एक करके जांच की, सभी नियंत्रण मान्य हैं लेकिन यह .ddcustomerForm.valid अभी भी गलत है।

— sa_

मुझे लगता है कि मुझे पता चला। एक ईमेल क्षेत्र और नियमित अभिव्यक्ति है, लेकिन किसी तरह नियंत्रण की स्थिति

— PENDING है

@ AngularInDepth.com - यदि नियंत्रणों में से कोई एक रूप समूह है, तो आपका फ़ंक्शन अमान्य प्रपत्र समूह लौटाएगा और विशिष्ट प्रपत्र नियंत्रण नहीं जो अमान्य है

— जॉन स्मिथ

Answer 2

मैंने अभी इस मुद्दे पर बात की है: प्रत्येक फ़ॉर्म फ़ील्ड मान्य है, लेकिन फिर भी फ़ॉर्म स्वयं अमान्य है।

यह बताता है कि मैंने एक फॉर्मअरे पर 'Validator.required' सेट किया था जहां नियंत्रणों को गतिशील रूप से जोड़ा / हटाया जाता है। इसलिए, भले ही फॉर्मअरे खाली था, फिर भी इसकी आवश्यकता थी और इसलिए फॉर्म हमेशा अमान्य था, भले ही हर दृश्य नियंत्रण सही ढंग से भरा हो।

मुझे फ़ॉर्म का अमान्य हिस्सा नहीं मिला, क्योंकि मेरे 'findInvalidControls' फ़ंक्शन ने केवल फॉर्मकंट्रोल की जाँच की और फ़ॉर्मग्रुप / फ़ॉर्मअरे ने नहीं। इसलिए मैंने इसे थोड़ा अपडेट किया:

/* 
   Returns an array of invalid control/group names, or a zero-length array if 
   no invalid controls/groups where found 
*/
public findInvalidControlsRecursive(formToInvestigate:FormGroup|FormArray):string[] {
    var invalidControls:string[] = [];
    let recursiveFunc = (form:FormGroup|FormArray) => {
      Object.keys(form.controls).forEach(field => { 
        const control = form.get(field);
        if (control.invalid) invalidControls.push(field);
        if (control instanceof FormGroup) {
          recursiveFunc(control);
        } else if (control instanceof FormArray) {
          recursiveFunc(control);
        }        
      });
    }
    recursiveFunc(formToInvestigate);
    return invalidControls;
  }

Comments

अविश्वसनीय रूप से उपयोगी उत्तर। बहुत बहुत धन्यवाद

— मिक्की

सहमत हूं, बहुत उपयोगी जवाब।

— nenea

Answer 3

एक अमान्य कोणीय नियंत्रण में सीएसएस वर्ग का नाम 'एनजी-अमान्य' है ।

क्रोम में DevTools के तहत, कंसोल टैब चुनें।

कंसोल में प्रॉम्प्ट प्रकार कमांड:

document.getElementsByClassName('ng-invalid')

आउटपुट इस के समान होना चाहिए:

इस स्थिति में, प्रपत्र नियंत्रण के लिए रेखांकित पाठ है listen-address। और घेरा हुआ पाठ: .ng-invalidइंगित करता है कि नियंत्रण अमान्य है।

नोट: क्रोम में परीक्षण किया गया

Comments

मुझे इस सवाल का जवाब देने का सबसे सीधा तरीका लगता है।

— कोकपिला

आपने मुझे पागल होने से बचा लिया, अगर केवल मैं आपको एक पेय खरीद सकता था

— एडम विनीपास

Answer 4

दोनों रूप और आपके सभी नियंत्रण कोणीय वर्ग AbstractControl का विस्तार करते हैं। प्रत्येक कार्यान्वयन में सत्यापन त्रुटियों के लिए एक सहायक होता है।

let errors = this.AddCustomerForm.errors
// errors is an instance of ValidatorErrors

एपीआई डॉक्स में सभी संदर्भ https://angular.io/api/forms/AbstractControl शामिल हैं

संपादित करें

मुझे लगा कि त्रुटि करने वाले ने इस तरह से काम किया है, लेकिन जीथब के लिए इस लिंक से पता चलता है कि कुछ अन्य लोग भी हैं जिन्होंने ऐसा ही सोचा था जैसे मैंने https://github.com/angular/angular/issues/11530

किसी भी स्थिति में, कंट्रोल एक्सेसर का उपयोग करके आप अपने फॉर्म में सभी फॉर्मकंट्रोल पर पुनरावृति कर सकते हैं।

Object.keys(this.AddCustomerForm.controls)
    .forEach( control => {
        //check each control here
        // if the child is a formGroup or a formArray
        // you may cast it and check it's subcontrols too
     })

Comments

यह रिटर्न शून्य भी है, खाली नियंत्रण भी हैं

— sa_

जब कोई त्रुटि न हो तो इसे वापस कर देना चाहिए। क्या आप अपना टेम्पलेट पोस्ट कर सकते हैं?

— लुकफॉरअंगुलर

हाँ, यह काम नहीं करेगा, प्रत्येक प्रपत्र नियंत्रणों पर निर्धारित अलग-अलग मान्यताएँ, उन प्रत्येक प्रपत्र नियंत्रणों में उनकी त्रुटियां होती हैं, फ़ॉर्म नहीं होता है। आपको नियंत्रणों को पुनरावृत्त करने की आवश्यकता है जैसे मैक्सिमस ने उत्तर दिया है।

— AJT82

मैं इस तरह के प्रत्येक अलग-अलग कॉन्ट्रोवर्सी के लिए एरर एक्सेस कर सकता हूं ।form.controls ['ईमेल']। एरर्स

— नाजरुल मुहिमिन

@ AJT_82 वास्तव में फॉर्म स्वयं त्रुटियों को दिखा सकता है यदि एक वैध फॉर्मूग्रुप के लिए निर्धारित किया गया है (क्रॉस फ़ील्ड सत्यापन के बारे में डॉक्स की जांच करें, जो समूह पर मान्य करने के लिए समझ में आता है और नियंत्रण में नहीं है)

— LookForAngel

Answer 5

अब, कोणीय 9 में, आप अवैध नियंत्रण सत्यापनकर्ताओं को दिखाने के लिए markAllAsTouched () विधि का उपयोग कर सकते हैं:

this.AddCustomerForm.markAllAsTouched();

Comments

यह एक +1 देने जा रहा है, क्योंकि इससे मुझे यह पता लगाने में मदद मिली कि मुझे क्या पता होना चाहिए --- जो कि उपयोगकर्ता को आवश्यक रूप से इनपुट्स को नहीं छूने पर सत्यापन संदेश दिखाने के लिए है।

— सीन हॉल

Answer 6

यदि आप फ़ॉर्म में बहुत अधिक फ़ील्ड नहीं रखते हैं, तो आप बस F12 और नियंत्रण पर होवर कर सकते हैं, आप फ़ील्ड के प्राचीन / छुआ / मान्य मानों के साथ पॉप-अप देख पाएंगे- "# fieldname.form-control.ng- untouched.ng-अवैध "।

Answer 7

मुझे लगता है कि आपको this.form.updateValueAndValidity()प्रत्येक नियंत्रण में उसी पद्धति का उपयोग करने या निष्पादित करने का प्रयास करना चाहिए ।

Answer 8

इसे इस्तेमाल करे

 findInvalidControls(f: FormGroup) {
    const invalid = [];
    const controls = f.controls;
    for (const name in controls) {
      if (controls[name].invalid) {
        invalid.push(name);
      }
    }
    return invalid;
  }

Answer 9

यह सभी नामों को नियंत्रित करेगा names

for (let el in this.ReactiveForm.controls) {
      if (this.ReactiveForm.controls[el].errors) {
        console.log(el)
      }
 }          

आप इसमें से एक सरणी या स्ट्रिंग बना सकते हैं और उपयोगकर्ता को प्रदर्शित कर सकते हैं

Answer 10

मैंने AngularInDepth.com -s कोड में सुधार करने के लिए स्वतंत्रता ली , ताकि यह गैर - कानूनी रूप से अमान्य इनपुटों की भी पुन: खोज कर सके। Wether यह FormArray-s या FormGroup-s द्वारा नेस्टेड है। बस शीर्ष स्तर फॉर्मग्रुप इनपुट करें और यह उन सभी फॉर्मकंट्रोल को लौटा देगा जो अमान्य हैं।

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

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        switch( control.constructor.name )
        {
            case 'AbstractControl':
            case 'FormControl':
                if (control.invalid) _invalidControls.push( control );
                break;

            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

बस उन लोगों के लिए जो इसकी आवश्यकता है, इसलिए उन्हें इसे स्वयं कोड करने की आवश्यकता नहीं है।

# 1 संपादित करें

यह अनुरोध किया गया था कि यह अमान्य FormArray-s और FormGroups भी लौटाता है, इसलिए यदि आपको इसकी आवश्यकता है, तो भी इस कोड का उपयोग करें

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        if (control.invalid) _invalidControls.push( control );
        switch( control.constructor.name )
        {    
            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

Comments

मैंने इसे आज़माया, लेकिन इसमें कोई अमान्य फ़ॉर्मग्रुप या फ़ॉर्मअरे नहीं मिलता है ... केवल अमान्य फ़ॉर्मकंट्रोल है। मैंने वही गलती की ... मेरा जवाब देखिए।

— जेट

आपके उपयोग के मामले में फिट होने के लिए मैंने अपने उत्तर को बेहतर बनाया।

— कार्ल जोहान वाल्नर

Answer 11

आप फ़ॉर्म के मूल्य को लॉग कर सकते हैं console.log(this.addCustomerForm.value), यह सभी नियंत्रण के मूल्य को कम करेगा या फिर अशक्त या "" (खाली) फ़ील्ड अमान्य नियंत्रण को इंगित करेगा

Answer 12

यदि आप जांचना चाहते हैं कि फॉर्म वैध है या नहीं, और कोई कोड परिवर्तन नहीं करना चाहते हैं, तो आप क्रोम डेवलपर टूल कंसोल में निम्न कमांड को चलाने का प्रयास कर सकते हैं। कृपया सुनिश्चित करें कि आपका कोणीय ऐप उस घटक को प्रदर्शित कर रहा है जो प्रश्न में प्रपत्र को होस्ट करता है।

ng.probe(document.querySelector("app-your-component-selector-name")).componentInstance;

उपरोक्त आदेश में अपने घटक चयनकर्ता नाम को बदलना न भूलें।

यह आदेश आपके घटक सहित सभी चर को सूचीबद्ध करेगा AddCustomerForm। अब यदि आप इसका विस्तार करते हैं, तो आपको अपने सभी नियंत्रणों की सूची दिखाई देगी। फिर आप यह जांचने के लिए प्रत्येक नियंत्रण का विस्तार कर सकते हैं कि यह वैध है या नहीं।

Answer 13

Html पेज में खाली या अशक्त रूप नियंत्रण मूल्य की जाँच करें

प्रपत्र नियंत्रण मूल्य: {{formname.value | json}}