Angular Academy · पाठ

अक्षम और स्पर्श की गई अवस्थाएँ संभालना

अपने नियंत्रण में फ़ॉर्म की अवस्था दिखाएँ

पाठ 3, कुल 4 में से13 चरण

अक्षम और स्पर्श की गई अवस्थाएँ संभालना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

मान से आगे

एक पूर्ण कस्टम नियंत्रण फ़ॉर्म की दो अन्य अवधारणाओं का भी सम्मान करता है: disabled स्थिति और touched स्थिति। ये उपयोगकर्ता अनुभव और सत्यापन प्रदर्शन को नियंत्रित करती हैं।

setDisabledState

फ़ॉर्म नियंत्रण को अक्षम या सक्षम किए जाने पर Angular setDisabledState को कॉल करता है (उदाहरण के लिए control.disable() के ज़रिए)। इसे अपने कंपोनेंट में प्रतिबिंबित करें।

disabled = false;

setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

दृश्य में अक्षम स्थिति दिखाना

नियंत्रण को स्टाइल देने और सहभागिता रोकने के लिए disabled फ़्लैग का उपयोग करें, ताकि उपयोगकर्ता अक्षम फ़ील्ड को बदल न सकें।

template: '<button [disabled]="disabled" (click)="select(s)">star</button>'

हैंडलर की सुरक्षा

अपने बदलाव हैंडलर को भी सुरक्षित रखें, ताकि अक्षम स्थिति में प्रोग्राम के ज़रिए या कीबोर्ड से की गई सहभागिता कुछ न करे।

select(rating: number): void {
  if (this.disabled) return;
  this.value = rating;
  this.onChange(rating);
}

registerOnTouched

Angular नियंत्रण को स्पर्शित चिह्नित करने के लिए एक कॉलबैक देता है। इसे उसी तरह सहेजें जैसे आपने onChange को सहेजा था।

private onTouched: () => void = () => {};

registerOnTouched(fn: () => void): void {
  this.onTouched = fn;
}

onTouched को कॉल करना

जब उपयोगकर्ता नियंत्रण से बाहर जाता है, आमतौर पर blur होने पर, स्पर्शित कॉलबैक को कॉल करें। इससे Angular को पता चलता है कि उपयोगकर्ता ने सहभागिता की है और स्पर्शित-आधारित सत्यापन संदेश सक्षम हो जाते हैं।

onBlur(): void {
  this.onTouched();
}

Touched क्यों महत्वपूर्ण है

सत्यापन का उपयोगकर्ता अनुभव अक्सर किसी फ़ील्ड के स्पर्शित होने के बाद ही त्रुटियाँ दिखाता है। onTouched को कॉल किए बिना control.touched false रहता है और त्रुटि संदेश सही समय पर दिखाई नहीं दे सकते।

<small *ngIf="control.touched && control.invalid">Required</small>

Blur जोड़ना

टेम्पलेट में blur हैंडलर जोड़ें, ताकि नियंत्रण से बाहर जाने पर वह स्पर्शित चिह्नित हो।

template: '<div (blur)="onBlur()" tabindex="0">...</div>'

रिएक्टिव अक्षम पैटर्न

टेम्पलेट में disabled बाइंडिंग के बजाय फ़ॉर्म API (control.disable()) के ज़रिए अक्षम करना पसंद करें, ताकि Angular लगातार setDisabledState को नियंत्रित करे।

this.form.get('stars')?.disable();

सुगम्यता

अक्षम और फ़ोकस स्थितियों को सुगम तरीके से दिखाएँ: aria-disabled सेट करें, tabindex का प्रबंधन करें और सुनिश्चित करें कि कीबोर्ड उपयोगकर्ता blur कर सके तथा touched को ट्रिगर कर सके, ताकि नियंत्रण सभी के लिए उपयोगी रहे।

अब पूर्ण रूप से एकीकृत

मान, अक्षम और स्पर्शित स्थिति—सभी का प्रबंधन होने पर आपका नियंत्रण प्रतिक्रियाशील और टेम्पलेट-आधारित फ़ॉर्म में नेटिव इनपुट की तरह व्यवहार करता है। अंतिम भाग सत्यापन है।

त्वरित जाँच

अक्षम और स्पर्शित स्थिति से जुड़ी अपनी जानकारी जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने setDisabledState संभाला (अक्षम स्थिति दिखाना और उसके विरुद्ध सुरक्षा करना) और registerOnTouched संभाला (स्पर्शित चिह्नित करने के लिए blur पर कॉल करना, जिससे सत्यापन अनुभव सक्षम होता है)। अक्षम स्थिति नियंत्रित करने के लिए फ़ॉर्म API को प्राथमिकता दें और नियंत्रण को सुगम बनाए रखें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “अक्षम और स्पर्श की गई अवस्थाएँ संभालना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अक्षम और स्पर्श की गई अवस्थाएँ संभालना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“अक्षम और स्पर्श की गई अवस्थाएँ संभालना” में मैं क्या सीखूँगा?

अपने नियंत्रण में फ़ॉर्म की अवस्था दिखाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“अक्षम और स्पर्श की गई अवस्थाएँ संभालना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ