Angular Academy · पाठ

कस्टम नियंत्रणों में सत्यापन

कस्टम नियंत्रणों से वैलिडेटर उपलब्ध कराएँ

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

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

स्वयं-सत्यापित नियंत्रण

कस्टम नियंत्रण Validator इंटरफ़ेस लागू करके और NG_VALIDATORS के साथ पंजीकृत होकर अपना सत्यापन तर्क रख सकता है, जिससे इसका उपयोग करने वालों को स्वतः वैधता मिलती है।

Validator इंटरफ़ेस

Validator में ऐसा validate method होना आवश्यक है जो ValidationErrors (त्रुटियों का मानचित्र) लौटाए, या मान्य होने पर null लौटाए।

import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

NG_VALIDATORS पंजीकृत करना

NG_VALUE_ACCESSOR के साथ एक दूसरा मल्टी-प्रोवाइडर NG_VALIDATORS के लिए जोड़ें और फिर से forwardRef का उपयोग करें।

import { NG_VALIDATORS } from '@angular/forms';

providers: [
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]

त्रुटि मानचित्र लौटाना

त्रुटि मानचित्र की कुंजियाँ control.errors में प्रविष्टियाँ बन जाती हैं। वर्णनात्मक कुंजियों और वैकल्पिक डेटा का उपयोग करें, ताकि टेम्पलेट लक्षित संदेश दिखा सकें।

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

त्रुटियों का उपयोग

टेम्पलेट control.errors को अंतर्निहित सत्यापकों की तरह ही पढ़ते हैं और नियंत्रण अमान्य व स्पर्शित होने पर संदेश दिखाते हैं।

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

बाहरी सत्यापकों के साथ संयोजन

नियंत्रण के सत्यापक और उपयोगकर्ता द्वारा दिए गए सत्यापक (रिएक्टिव फ़ॉर्म में) दोनों चलते हैं और उनके परिणाम मिल जाते हैं। आपके नियंत्रण के नियम फ़ॉर्म के नियमों को बदलते नहीं, बल्कि उनमें जुड़ते हैं।

stars: [0, [Validators.required]] // plus the control's own validate()

गतिशील सत्यापन

यदि सत्यापन किसी ऐसे इनपुट पर निर्भर करता है जो बदलता है, तो पंजीकृत बदलाव कॉलबैक को कॉल करके Angular को फिर से सत्यापन चलाने के लिए सूचित करें।

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

असमकालिक सत्यापन

सर्वर जाँचों के लिए AsyncValidator लागू करें, जिसमें validate त्रुटियों वाला Observable या Promise लौटाए, और इसे NG_ASYNC_VALIDATORS के साथ पंजीकृत करें।

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

इसे केंद्रित रखें

केवल वही सत्यापन तर्क नियंत्रण में रखें जो उसके लिए स्वाभाविक हो (जैसे रेटिंग शून्य से अधिक होनी चाहिए)। पुनः उपयोग के लिए व्यवसाय-विशिष्ट नियमों को उपयोग करने वाले फ़ॉर्म में रखें।

सत्यापन का परीक्षण

मान वाले नकली नियंत्रण को पास करके और लौटाए गए त्रुटि मानचित्र या null की जाँच करके validate का सीधे इकाई परीक्षण करें।

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

पूर्ण कस्टम नियंत्रण

मान एक्सेसर, अक्षम, स्पर्शित और सत्यापन—सभी लागू होने पर आपका कंपोनेंट एक पूर्ण, पुनः उपयोग योग्य फ़ॉर्म नियंत्रण बन जाता है, जो उपयोग करने वालों को नेटिव इनपुट से अलग नहीं दिखता।

त्वरित जाँच

सत्यापन से जुड़ी अपनी जानकारी जाँचें।

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

पुनरावलोकन

आपने Validator.validate लागू करके, NG_VALIDATORS पंजीकृत करके, त्रुटि मानचित्र लौटाकर और registerOnValidatorChange के ज़रिए गतिशील पुनः-सत्यापन का समर्थन करके सत्यापन जोड़ा। पूर्ण रूप से एकीकृत कस्टम नियंत्रण के लिए वैकल्पिक रूप से NG_ASYNC_VALIDATORS के साथ AsyncValidator भी जोड़ा।

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

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

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

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

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

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

क्या “कस्टम नियंत्रणों में सत्यापन” पाठ निःशुल्क है?

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

“कस्टम नियंत्रणों में सत्यापन” में मैं क्या सीखूँगा?

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

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

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

“कस्टम नियंत्रणों में सत्यापन” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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