मुझे पता है कि उत्तर पहले से ही दिया गया है, लेकिन मैं थोड़ा संक्षिप्त जवाब देना चाहता हूं कि फॉर्म के मूल्य को कैसे अपडेट किया जाए ताकि अन्य नए कामर्स को एक स्पष्ट विचार मिल सके।
एक उदाहरण के रूप में इसका उपयोग करने के लिए आपकी फ़ॉर्म संरचना इतनी सही है। इसलिए, अपने उत्तर के दौरान मैं इसे रूप के रूप में निरूपित करूंगा।
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
इसलिए हमारा फॉर्म एक फॉर्मग्रुप प्रकार की वस्तु है जिसमें तीन फॉर्मकंट्रोल हैं ।
मॉडल मान को अद्यतन करने के दो तरीके हैं:
व्यक्तिगत नियंत्रण के लिए एक नया मान सेट करने के लिए setValue () विधि का उपयोग करें। सेटवैल्यू () विधि कड़ाई से फार्म समूह की संरचना का पालन करती है और नियंत्रण के लिए पूरे मूल्य को प्रतिस्थापित करती है।
पैचवॉल्यू () विधि का उपयोग उस ऑब्जेक्ट में परिभाषित किसी भी गुण को बदलने के लिए करें जो फॉर्म मॉडल में बदल गया है।
SetValue () विधि की सख्त जाँच जटिल रूपों में नेस्टिंग त्रुटियों को पकड़ने में मदद करती है, जबकि पैचवैल्यू () उन त्रुटियों पर चुपचाप विफल हो जाती है।
कोणीय आधिकारिक दस्तावेज से यहां
इसलिए, जब एक समूह समूह उदाहरण के लिए मान को अपडेट किया जाता है जिसमें कई नियंत्रण होते हैं, लेकिन आप केवल मॉडल के कुछ हिस्सों को अपडेट करना चाहते हैं। पैचवैल्यू () वह है जिसे आप ढूंढ रहे हैं।
उदाहरण देखते हैं। जब आप पैचवैल्यू () का उपयोग करते हैं
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
लेकिन जब आप setValue () का उपयोग करते हैं, तो आपको पूर्ण मॉडल को अपडेट करने की आवश्यकता होती है क्योंकि यह प्रपत्र समूह की संरचना का कड़ाई से पालन करता है। इसलिए, अगर हम लिखते हैं
this.form.setValue({
dept: 1
});
// it will throw error.
हमें फॉर्म समूह मॉडल के सभी गुणों को पास करना होगा। इस तरह
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
लेकिन मैं अक्सर इस शैली का उपयोग नहीं करता। मैं निम्नलिखित दृष्टिकोण का उपयोग करना पसंद करता हूं जो मेरे कोड क्लीनर और अधिक समझने में मदद करता है।
मैं क्या करता हूं, मैं सभी नियंत्रणों को एक अलग चर के रूप में घोषित करता हूं और उस विशिष्ट नियंत्रण को अपडेट करने के लिए सेटवैल्यू () का उपयोग करता हूं।
उपरोक्त फॉर्म के लिए, मैं ऐसा कुछ करूँगा।
get companyIdentifier(): FormControl {
return this.form.get('name') as FormControl;
}
get dept(): FormControl {
return this.form.get('dept') as FormControl;
}
get description(): FormControl {
return this.form.get('description') as FormControl;
}
जब आपको प्रपत्र नियंत्रण को अपडेट करने की आवश्यकता होती है, तो इसे अद्यतन करने के लिए केवल उस संपत्ति का उपयोग करें। जब उपयोगकर्ता ड्रॉप डाउन सूची से किसी आइटम का चयन करता है, तो उदाहरण में प्रश्नकर्ता ने विभाग के नियंत्रण को अद्यतन करने का प्रयास किया।
deptSelected(selected: { id: string; text: string }) {
console.log(selected) // Shows proper selection!
// instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.
this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}
मैं सुझाव देता हूं कि फॉर्मग्राफ की सभी संपत्तियों और तरीकों के बारे में जानने के लिए फॉर्मग्राफ एपीआई देखें।
अतिरिक्त : गेटटर के बारे में जानने के लिए यहां देखें