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

प्रस्तावना

चलो कोणीय में प्रतिक्रियाशील रूपों के बारे में बात करते हैं, कस्टम नियंत्रण के लिए सीखें कि उन्हें कैसे बनाया, उपयोग और मान्य किया जाए। लेख मानता है कि आप पहले से ही कोणीय ढांचे से परिचित हैं, लेकिन इसकी बारीकियों में अधिक गोता लगाना चाहते हैं। शुभ कामना, चलो शुरू हो जाओ।

प्रतिक्रियाशील और टेम्पलेट प्रेरित रूप

यह सुनिश्चित करने के लिए कुछ शब्द कि हम एक ही पृष्ठ पर हैं। एक कोणीय के दो प्रकार होते हैं: टेम्पलेट ड्रिवेन फॉर्म और रिएक्टिव फॉर्म ।

टेम्प्लेट ड्रिवेन फॉर्म दो तरह से बाइंडिंग फॉर्म आधारित हैं (hi, angularjs)। हम उस क्लास में फ़ील्ड निर्दिष्ट करते हैं (उदाहरण के लिए, उपयोगकर्ता नाम), html में उस इनपुट टैग पर जिसे हम बांधते हैं [(मान)] = "उपयोगकर्ता नाम", और जब इनपुट मान बदलता है, तो उपयोगकर्ता नाम मान बदल जाता है। 2011 में, कि लानत जादू था! ठीक है, लेकिन एक अति सूक्ष्म अंतर है। इस तरह, जटिल आकार बनाना ... मुश्किल होगा।

रिएक्टिव फॉर्म सरल और जटिल रूपों के निर्माण के लिए एक सुविधाजनक उपकरण है। वे हमें बताते हैं, "फॉर्म क्लास ( फॉर्मग्रुप ) का एक उदाहरण बनाएं, उस पर नियंत्रण ( फॉर्मकंट्रोल ) के उदाहरणों को पास करें और बस इसे html को दें, और मैं बाकी काम करूंगा।" ठीक है, चलो कोशिश करते हैं:

class UsefullComponent { public control = new FormControl(''); public formG = new FormGroup({username: control}); } 

 <form [formGroup]="formG"> <input type="text" formControlName="username"> </form> 

नतीजतन, हमें एक प्रतिक्रियात्मक रूप मिलता है, लाठी के साथ और ... ठीक है, आप समझते हैं, सभी सुविधाओं के साथ। उदाहरण के लिए, formG.valueChanges हमें प्रपत्र परिवर्तनों का अवलोकन (स्ट्रीम) देगा। आप नए नियंत्रण भी जोड़ सकते हैं, मौजूदा लोगों को हटा सकते हैं, सत्यापन नियमों को बदल सकते हैं, फॉर्म वैल्यू ( formG.value ) प्राप्त कर सकते हैं और बहुत कुछ। और यह सब formG के एक उदाहरण के साथ काम कर रहा है।

और प्रत्येक बार उपरोक्त वर्गों के उदाहरणों को मैन्युअल रूप से नहीं बनाने के लिए, कोणीय डेवलपर्स ने हमें एक सुविधाजनक फॉर्मब्यूलर दिया, जिसकी मदद से ऊपर दिए गए उदाहरण को इस तरह से फिर से लिखा जा सकता है:

 class UsefullComponent { public formG: FormGroup; constructor(private fb: FormBuilder) { this.formG = fb.group({ name: '' //  new FormControl() !! }) } } 

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

कोणीय हमें बताता है "यदि आपके पास पर्याप्त देशी नियंत्रण (इनपुट, दिनांक, संख्या और अन्य) नहीं है, या यदि आप किसी चीज़ के लिए उन्हें बिल्कुल पसंद नहीं करते हैं, तो यहां अपना खुद का बनाने के लिए एक सरल लेकिन बहुत शक्तिशाली उपकरण है।" कस्टम नियंत्रण का उपयोग प्रतिक्रियाशील के साथ भी किया जा सकता है, यहां तक ​​कि टेम्पलेट-चालित रूपों के साथ भी, और वे निर्देशों (आश्चर्यचकित!) का उपयोग करके कार्यान्वित किए जाते हैं। यह जानते हुए कि घटक एक टेम्पलेट के साथ निर्देश हैं (आपको क्या चाहिए), हम लिखते हैं:

 import { Component, Input } from '@angular/core'; @Component({ selector: 'counter-control', template: ` <button (click)="down()">Down</button> {{ value }} <button (click)="up()">Up</button> ` }) class CounterControlComponent { @Input() value = 0; up() { this.value++; } down() { this.value - ; } } 

किसी भी निर्देश की तरह, इसे मॉड्यूल में घोषित किया जाना चाहिए (ताकि लेख में वृद्धि न हो, हम इस तरह की बारीकियों को छोड़ देंगे)।

अब हम बनाए गए घटक का उपयोग कर सकते हैं:

 import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: ` <counter-control></counter-control> ` }) class ParentComponent {} 

यह सब निश्चित रूप से काम करता है, लेकिन रूपों कहाँ हैं! कम से कम टेम्पलेट-चालित ...।
कोई घबराहट नहीं, सब कुछ ControlValueAccessor से मिलने के बाद होगा।

नियंत्रण मूल्य अभिगमकर्ता

अपने कस्टम नियंत्रण के साथ बातचीत करने के लिए कोणीय तंत्र के लिए, आपको एक विशिष्ट इंटरफ़ेस लागू करने के लिए इस नियंत्रण की आवश्यकता होती है। इस इंटरफ़ेस को ControlValueAccessor कहा जाता है। यह ओओपी से बहुरूपता का एक काफी अच्छा उदाहरण है, जब हमारी वस्तु (इस मामले में, नियंत्रण) एक इंटरफ़ेस को लागू करता है, और अन्य ऑब्जेक्ट (कोणीय रूप) इस इंटरफ़ेस के माध्यम से हमारी वस्तु के साथ बातचीत करते हैं।

ControlValueAccessor के लिए धन्यवाद, हमारे पास नियंत्रण के साथ काम करने का एक ही तरीका है, जो संयोगवश, केवल कस्टम नियंत्रण बनाने के लिए उपयोग नहीं किया जाता है। हुड के तहत कोणीय भी इस इंटरफ़ेस का उपयोग करता है। किस लिए? और सिर्फ एक समान लाने के लिए देशी नियंत्रण के व्यवहार को देखो। उदाहरण के लिए, इनपुट में, मान को मान विशेषता में समाहित किया गया है, चेकबॉक्स में, मान को जाँच की गई विशेषता के माध्यम से निर्धारित किया जाता है। इस प्रकार, प्रत्येक प्रकार के नियंत्रण का अपना ControlValueAccessor होता है: इनपुट और टेक्स्टारिया के लिए DefaultValueAccessor, चेकबॉक्स के लिए CheckboxControlValueAccessor, रेडियो बटन के लिए RadioControlValueAccessor , और इसी तरह।

लेकिन ControlValueAccessor का उपयोग कर कोणीय क्या करता है? सब कुछ काफी सरल है, यह मॉडल से DOM (दृश्य) तक का मान लिखता है, और फॉर्मग्रुप और अन्य निर्देशों के लिए परिवर्तन नियंत्रण घटना को भी बढ़ाता है।

अब जब हमने ControlValueAccessor के बारे में जान लिया है , तो हम इसे अपने नियंत्रण में लागू कर सकते हैं।

आइए इसके इंटरफेस को देखें:

 interface ControlValueAccessor { writeValue(value: any): void registerOnChange(fn: any): void registerOnTouched(fn: any): void } 

writeValue (मान: कोई भी) - जिसे उस समय कहा जाता है जब स्रोत ( नया फॉर्मकंट्रोल ('मैं डिफ़ॉल्ट मान हूं) ) या नियंत्रण से ऊपर एक नया मान ।सेटवैल्यू (' मैं सेटल हो चुका हूं ') सेट है ।

registerOnChange (fn: any) - एक विधि जो हैंडलर को परिभाषित करती है जिसे मूल्य परिवर्तन होने पर कॉल किया जाना चाहिए (fn एक कॉलबैक है जो उस रूप को सूचित करेगा जो इस नियंत्रण में मूल्य बदल गया है)।

registerOnTouched (fn: any) - उस कॉलबैक को परिभाषित करता है जिसे ब्लर ईवेंट पर कॉल किया जाता है (नियंत्रण को स्पर्श से फ़्लैग किया जाता है)

 import { Component, Input } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; @Component({ selector: 'counter-control', template: ` <button (click)="down()">Down</button> {{ value }} <button (click)="up()">Up</button> ` }) class CounterControlComponent implements ControlValueAccessor { @Input() value = 0; onChange(_: any) {} up() { this.value++; } down() { this.value - ; } writeValue(value: any) { this.value = value; } registerOnChange(fn) { this.onChange = fn; } registerOnTouched() {} } 

नियंत्रण में होने वाले परिवर्तनों के बारे में माता-पिता के रूप में जागरूक होने के लिए, हमें मूल्य के मूल्य में प्रत्येक परिवर्तन के लिए onChange पद्धति को कॉल करने की आवश्यकता है। प्रत्येक विधि (ऊपर और नीचे) में एक ऑनचेंज कॉल नहीं लिखने के लिए, हम गेटर्स और सेटर्स के माध्यम से मूल्य क्षेत्र को लागू करते हैं:

 // … class CounterControlComponent implements ControlValueAccessor { private _value; get value() { return this._value; } @Input() set value(val) { this._value = val; this.onChange(this._value); } onChange(_: any) {} up() { this.value++; } down() { this.value - ; } // … } 

फिलहाल, कोणीय को यह नहीं पता है कि ControlValueAccessor को लागू करने वाले घटक को एक कस्टम नियंत्रण के रूप में माना जाना चाहिए, आइए इसके बारे में उसे बताएं:

 import { Component, Input, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ … providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterControlComponent), multi: true }] }) class CounterControlComponent implements ControlValueAccessor { … } 

कोड के इस भाग में, हम कोणीय से कहते हैं, "मैं एक नया कस्टम नियंत्रण पंजीकृत करना चाहता हूं ( प्रदान करें: NG_VALUE_ACCESSOR ), मौजूदा का उपयोग करें (इस समय हमारा घटक प्रारंभ हो जाएगा) घटक का उदाहरण ( उपयोग करें: आगे चल रहा है: () => CounterControlComponent )" मान)। ।

बहु: यह दर्शाता है कि ऐसे टोकन ( NG_VALUE_ACCESSOR ) के साथ कई निर्भरताएँ हो सकती हैं।

सिर्फ बनाया नहीं

यह हमारे कस्टम नियंत्रण zayuzat का समय है। मॉड्यूल के आयात में FormsModule / ReactiveFormsModule को जोड़ना न भूलें जहां यह नियंत्रण उपयोग किया जाता है।

टेम्पलेट चालित प्रपत्रों में उपयोग करें

यहाँ सब कुछ सरल है, ngModel के माध्यम से दो-तरफ़ा बाइंडिंग का उपयोग करने पर हमें मॉडल में बदलाव और इसके विपरीत एक दृश्य परिवर्तन मिलता है:

 import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: ` <counter-control [(ngModel)]="controlValue"></counter-control> ` }) class ParentComponent { controlValue = 10; } 

प्रतिक्रियाशील रूपों में उपयोग करें

जैसा कि लेख की शुरुआत में कहा गया है, FormBuilder के माध्यम से प्रतिक्रियात्मक रूप का एक उदाहरण बनाएं , HTML में प्रस्तुत करें और आनंद लें:

 import { Component, OnInit } from '@angular/core'; import { FormBuilder } from '@angular/forms'; @Component({ selector: 'parent-component', template: ` <form [formGroup]="form"> <counter-control formControlName="counter"></counter-control> </form> ` }) class ParentComponent implements OnInit { form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({ counter: 5 }); } } 

अब यह हमारे कस्टम नियंत्रणों के साथ एक पूर्ण प्रतिक्रियाशील रूप है, जबकि सभी तंत्र देशी नियंत्रणों के समान ही काम करते हैं (क्या मैंने बहुरूपता का उल्लेख किया है?)। वर्तमान लेख को लोड नहीं करने के लिए, हम अगले लेख में कस्टम नियंत्रण त्रुटियों को मान्य और प्रदर्शित करने के बारे में बात करेंगे।

सामग्री:

पास्कल Precht से कस्टम नियंत्रण के बारे में लेख ।
गोदी के रूप कोणीय में।
Rxjs के बारे में लेखों की एक श्रृंखला ।