नियंत्रण बनाए जाने के बाद, कोणीय में, वाल्डिएटर को फॉर्मकंट्रोल में कैसे जोड़ा जाए?

Question

हमारे पास एक घटक है जिसमें गतिशील रूप से बनाया गया है। सत्यापनकर्ताओं के साथ नियंत्रण जोड़ने के लिए कोड इस तरह दिख सकता है:

var c = new FormControl('', Validators.required);

लेकिन हम कहते हैं कि मैं बाद में 2nd Validator जोड़ना चाहता हूं । हम इसे कैसे पूरा कर सकते हैं? हम इस पर ऑनलाइन कोई दस्तावेज नहीं ढूंढ सकते। मैंने पाया कि हालांकि फॉर्म कंट्रोल में सेटविलेक्टर्स हैं

this.form.controls["firstName"].setValidators 

लेकिन यह स्पष्ट नहीं है कि नए या कस्टम सत्यापनकर्ता को कैसे जोड़ा जाए।

Answer 1

आप बस फॉर्मकंट्रोल को वेरिलेटर्स की एक सरणी से गुजारें।

यहां एक उदाहरण दिखाया गया है कि आप मौजूदा फॉर्म-कंट्रोलर में सत्यापनकर्ताओं को कैसे जोड़ सकते हैं:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

ध्यान दें, यह आपके द्वारा जोड़े गए किसी भी मौजूदा सत्यापनकर्ता को जब आपने फॉर्मकंट्रोल बनाया था, तब रीसेट कर देगा।

Comments

हा ... कभी-कभी आप किसी चीज को इतनी देर तक देखते हैं कि यह सिर्फ कदम दूर करने के लिए सबसे अच्छा है। धन्यवाद!!

— अभियोक्ता

क्या मान्यता हटाने का कोई तरीका है

— अभिजीत ss

पुराने लोगों को उखाड़ फेंके बिना ऐसा करने का कोई तरीका? या किसी भी तरह से नए लोगों को जोड़ने के लिए?

— danday74

@ danday74, इस प्रश्न के निचले भाग पर एडुआर्ड वॉयड का उत्तर देखें। स्वीकार किया जाना चाहिए उत्तर imo। वह बताता है कि आपको क्या करना है जो आपको जानना चाहिए, जिसे मुझे यह भी जानना चाहिए कि कैसे करना है।

— क्रिस

मुझे .updateValueAndValidity()नए सत्यापनकर्ताओं को सेट करने के बाद फ़ॉर्म नियंत्रण पर भी कॉल करना था।

— कीलोन

Answer 2

@Delosdos ने जो पोस्ट किया है उस पर जोड़ने के लिए।

नियंत्रण के लिए एक सत्यापनकर्ता सेट करेंFormGroup : this.myForm.controls['controlName'].setValidators([Validators.required])

फॉर्मग्रुप में नियंत्रण से सत्यापनकर्ता को निकालें : this.myForm.controls['controlName'].clearValidators()

एक बार उपरोक्त लाइनों में से किसी एक को चलाने के बाद फॉर्मग्रुप को अपडेट करें। this.myForm.controls['controlName'].updateValueAndValidity()

यह प्रोग्राम को आपके फॉर्म सत्यापन को निर्धारित करने का एक शानदार तरीका है।

Comments

मेरे लिए यह अंतिम पंक्ति के बिना काम कर रहा था, मुझे पूरा यकीन है कि कोणीय के नए संस्करणों ने अब अपने आप फॉर्म की वैधता को अपडेट कर दिया है। लेकिन हमें updateValueAndValidityविधि के बारे में बताने के लिए धन्यवाद , एक दिन काम आ सकता है!

— नीनो फीलू जूल

@NinoFiliu updateValueAndValidityअभी भी सत्यापन करने के लिए उपयोग किया जाता है, और कोणीय के नए संस्करणों में किसी भी अलग तरीके से नहीं संभाला जाता है। क्या होता है setValidatorsसत्यापनकर्ताओं को अपडेट किया जाता है , लेकिन सत्यापन जांच नहीं चलती है, और फिर आप updateValueAndValidityसत्यापन करने के लिए उपयोग करते हैं। आप सत्यापनकर्ता को उस बिंदु पर सेट कर रहे होंगे जहां परिवर्तन का पता लगाना आपके लिए इसे संभालता है, लेकिन आप updateValueAndValidityसमूह पर उपयोग कर पाएंगे या नियंत्रण कर सकते हैं कि आप किस सत्यापनकर्ता को केवल महत्वपूर्ण सेट करते हैं - github.com/angular/angular/issues/19622#issuecusment- 341547884 ।

— mtpultz

मैं एंगुलर 6 पर हूं और इसके बिना काम नहीं कर सकता updateValueAndValidity। धन्यवाद @shammelburg!

— ओली Crt

कोणीय 7 पर और यह मेरे लिए अंतिम अपडेट लाइन के बिना भी काम नहीं करेगा।

— डेविड फाइंडले

हाँ। यह बिना काम कर रहा है updateValueAndValidity(), लेकिन कुछ मामलों में, ऐसा नहीं है। यदि आपने इसके updateValueAndValidity()बाद जोड़ा तो setValidators()यह नियंत्रण से संबंधित परिवर्तनों को तुरंत प्रभावित करेगा । इसलिए updateValueAndValidity () `जोड़ना बेहतर है।

— जेमिथ निन्मांथा

Answer 3

यदि आप reactiveFormModule का उपयोग कर रहे हैं और फॉर्मग्रुप को इस तरह परिभाषित किया गया है:

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('[e-mail]', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

आप इस दृष्टिकोण के साथ एक नया सत्यापनकर्ता जोड़ने में सक्षम हैं ( और पुराने को बनाए रखें )

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validator एक कंपोज़ वैद्यक देता है जिसमें पहले से परिभाषित सभी सत्यापनकर्ता होते हैं।

Comments

Imo यह स्वीकृत उत्तर होना चाहिए। यह दर्शाता है कि ओपी द्वारा अनुरोध किए गए सत्यापनकर्ताओं को कैसे जोड़ा जाए, लेकिन यह भी आपको दिखाता है कि पहले से सेट किए गए सत्यापनकर्ताओं को कैसे बनाए रखा जाए; पहली बात यह थी कि मैंने स्वीकार किए गए उत्तर को पढ़ने के बाद कैसे किया, क्योंकि मैं कुछ मान्यताओं को पहले से ही लिखना नहीं चाहता था, लेकिन फिर भी उन्हें अतिरिक्त रूप से जोड़ने की आवश्यकता थी। इस जवाब के लिए धन्यवाद @Eduard Void

— क्रिस

मैं अपने पूर्ववर्ती से सहमत हूं। सवाल यह था कि नियंत्रण के लिए नए सत्यापनकर्ता को कैसे जोड़ा जाए , न कि इसे कैसे प्रतिस्थापित किया जाए।

— 14

मैंने control.setValidators(control.validator ? [ control.validator, Validators.email ] : Validators.email);लगभग अशक्त चेक प्राप्त करने के लिए किया था

— विलियम लोहान

Answer 4

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

जहां तक ​​मुझे पता है, यह संभव नहीं है। केवल एक चीज जो आप कर सकते हैं, वह है वैलेयमेंट्स की गतिशीलता को गतिशील बनाना।

लेकिन जो हम याद करते हैं, वह यह है कि एक फ़ंक्शन addValidator () को पहले से जोड़े गए सत्यापनकर्ताओं को ओवरराइड नहीं करना है। यदि किसी के पास उस आवश्यकता का उत्तर है, तो यहां पोस्ट किया जाना अच्छा होगा।

Comments

आपको लगता है control.setValidators(control.validator ? [ control.validator, Validators.email ] : Validators.email);कि काम करेगा।

— विलियम लोहन

@Eduard Void का उत्तर देखें stackoverflow.com/a/53276815/6656422

— विलियम लोहान

Answer 5

एडुअर्ड शून्य के अलावा यहाँ addValidatorsविधि का जवाब है :

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  this.clearValidators();
  this.setValidators( this.validator ? [ this.validator, ...validators ] : validators );
};

इसका उपयोग करके आप सत्यापनकर्ताओं को गतिशील रूप से सेट कर सकते हैं:

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);