Angular Academy · पाठ

असिंक्रोनस वैलिडेटर

सर्वर के विरुद्ध असिंक्रोनस रूप से सत्यापन करें

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

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

प्रतीक्षा करने वाला सत्यापन

कुछ सत्यापन के लिए सर्वर की आवश्यकता होती है, जैसे यह जाँचना कि कोई उपयोगकर्ता नाम पहले से लिया गया है या नहीं। असिंक्रोनस वैलिडेटर ऐसा Promise या Observable लौटाते हैं, जो त्रुटि-मानचित्र या null में हल होता है।

AsyncValidatorFn प्रकार

असिंक्रोनस वैलिडेटर एक कंट्रोल लेता है और Observable<ValidationErrors | null> या Promise लौटाता है।

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

null लौटाने का अर्थ मान्य है

मान्य होने पर null में हल कीजिए, और अमान्य होने पर { taken: true } जैसी त्रुटि ऑब्जेक्ट लौटाइए, ठीक समकालिक वैलिडेटर की तरह।

उपयोगकर्ता नाम वैलिडेटर

यह वैलिडेटर किसी सेवा को कॉल करता है और परिणाम को मैप करता है।

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

इसे पंजीकृत करना

असिंक्रोनस वैलिडेटर किसी कंट्रोल के तीसरे आर्ग्युमेंट में दिए जाते हैं और समकालिक वैलिडेटर से अलग रहते हैं।

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

PENDING स्थिति

असिंक्रोनस वैलिडेटर के चलने के दौरान कंट्रोल की स्थिति PENDING होती है। इसका उपयोग स्पिनर दिखाने के लिए कीजिए।

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

अनुरोधों के बीच विलंब

असिंक्रोनस वैलिडेटर मान में होने वाले हर बदलाव पर चलते हैं। सर्वर पर बार-बार अनुरोध भेजने से बचने के लिए विलंब लागू कीजिए।

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap पुराने कॉल रद्द करता है

switchMap का उपयोग करने पर मान फिर बदलते ही पिछला जारी अनुरोध रद्द हो जाता है, इसलिए केवल नवीनतम परिणाम महत्वपूर्ण रहता है।

updateOn रणनीति

updateOn: 'blur' सेट कीजिए, ताकि असिंक्रोनस सत्यापन केवल तब चले जब उपयोगकर्ता फ़ील्ड से बाहर जाए। इससे अनुरोधों की संख्या कम होती है।

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

त्रुटि पढ़ना

सत्यापन पूरा होने और कंट्रोल में बदलाव या उसे स्पर्श किए जाने के बाद त्रुटि दिखाइए।

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

सर्वोत्तम अभ्यास

हमेशा अनुरोधों के बीच विलंब लागू कीजिए, पुराने अनुरोध रद्द कीजिए, प्रतीक्षा का संकेत दिखाइए और नेटवर्क त्रुटियों को संभालिए, ताकि फ़ॉर्म PENDING स्थिति में अटका न रहे।

त्वरित जाँच

असिंक्रोनस वैलिडेटर की अपनी समझ जाँचिए।

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

पुनरावलोकन

आपने सीखा कि AsyncValidatorFn ValidationErrors | null वाला Observable/Promise लौटाता है और इसे कंट्रोल के तीसरे आर्ग्युमेंट में पंजीकृत किया जाता है, जिससे कंट्रोल PENDING स्थिति में चला जाता है। सर्वर कॉल को संभालने के लिए अनुरोधों के बीच विलंब लागू कीजिए और switchMap का उपयोग कीजिए।

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

एआई शिक्षक के साथ 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 पर वापस जाएँ