ControlValueAccessor इंटरफ़ेस
कस्टम विजेट को Angular फ़ॉर्म से जोड़ें
ControlValueAccessor इंटरफ़ेस, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Custom Controls क्यों
Angular forms, native inputs के साथ सीधे काम करते हैं। अपने component (जैसे rating widget, color picker या toggle) को ngModel और formControlName के साथ उपयोग करने योग्य बनाने के लिए उसे ControlValueAccessor लागू करना होगा।
सेतु
ControlValueAccessor (CVA), Angular के form model और आपके component के view के बीच सेतु है। यह निर्धारित करता है कि model values को अंदर कैसे लिखेगा और user के बदलाव बाहर कैसे भेजे जाएँगे।
Interface
CVA के लिए चार methods आवश्यक हैं: writeValue, registerOnChange, registerOnTouched और वैकल्पिक setDisabledState।
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Provider register करना
NG_VALUE_ACCESSOR को multi: true और component की ओर संकेत करने वाले useExisting के साथ provide करके Angular को बताएँ कि आपका component value accessor है।
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]forwardRef क्यों
forwardRef आवश्यक है, क्योंकि class के परिभाषित होने से पहले उसके अपने metadata में उसी class का reference दिया जाता है। यह resolution को class के उपलब्ध होने तक टाल देता है।
Component का ढाँचा
Custom control provider घोषित करता है और interface methods लागू करता है। Class वर्तमान value को अंदर रखती है।
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Native जैसा उपयोग
CVA लागू हो जाने के बाद आपका component template-driven और reactive forms में ठीक native input की तरह जुड़ जाता है।
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Data की दो दिशाएँ
Model से view की दिशा writeValue से होती है (Angular form value को अंदर भेजता है)। View से model की दिशा registerOnChange में register किए गए callback से होती है (आप user के बदलाव बाहर भेजते हैं)।
Touched की tracking
Form validation का UX touched state पर निर्भर करता है। आमतौर पर blur होने पर registerOnTouched से मिले callback के माध्यम से Angular को सूचित करें।
Disabled State
जब form control को disable करता है (control.disable()), तब Angular setDisabledState को call करता है, ताकि आपका component इसे दृश्य रूप से दिखा सके और input को अनदेखा कर सके।
आगे की योजना
आगे के पाठों में हर भाग लागू किया जाएगा: values लिखना और register करना, disabled और touched states संभालना तथा validation जोड़ना। ये सब मिलकर पूरी तरह integrated custom control बनाते हैं।
त्वरित जाँच
CVA की अपनी मूलभूत समझ जाँचें।
पुनरावृत्ति
आपने सीखा कि ControlValueAccessor, NG_VALUE_ACCESSOR के माध्यम से custom components को Angular forms से जोड़ता है। इसमें चार methods होते हैं, जिन्हें forwardRef और multi: true के साथ register किया जाता है। अब values लिखना और register करना लागू करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “ControlValueAccessor इंटरफ़ेस” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ControlValueAccessor इंटरफ़ेस” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“ControlValueAccessor इंटरफ़ेस” में मैं क्या सीखूँगा?
कस्टम विजेट को Angular फ़ॉर्म से जोड़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“ControlValueAccessor इंटरफ़ेस” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- ControlValueAccessor इंटरफ़ेस
- मान लिखना और पंजीकृत करना
- अक्षम और स्पर्श की गई अवस्थाएँ संभालना
- कस्टम नियंत्रणों में सत्यापन