[NgDefaultControl]
तृतीय पक्ष नियंत्रण ControlValueAccessorको कोणीय रूपों के साथ कार्य करने की आवश्यकता होती है । पॉलिमर की तरह उनमें से कई <paper-input>, <input>मूल तत्व की तरह व्यवहार करते हैं और इस प्रकार उपयोग कर सकते हैं DefaultValueAccessor। एक ngDefaultControlविशेषता जोड़ने से वे उस निर्देश का उपयोग कर सकेंगे।
<paper-input ngDefaultControl [(ngModel)]="value>
या
<paper-input ngDefaultControl formControlName="name">
इसलिए यह मुख्य कारण है कि इस पोशाक को पेश किया गया था।
इसे कोणीय 2 के अल्फा संस्करणों मेंng-default-control विशेषता कहा जाता था ।
तो DefaultValueAccessor निर्देश के ngDefaultControlलिए चयनकर्ताओं में से एक है :
@Directive({
selector:
'input:not([type=checkbox])[formControlName],
textarea[formControlName],
input:not([type=checkbox])[formControl],
textarea[formControl],
input:not([type=checkbox])[ngModel],
textarea[ngModel],
[ngDefaultControl]', <------------------------------- this selector
...
})
export class DefaultValueAccessor implements ControlValueAccessor {
इसका क्या मतलब है?
इसका अर्थ है कि हम इस विशेषता को तत्व (बहुलक घटक की तरह) लागू कर सकते हैं, जिसका अपना मूल्य अभिगमकर्ता नहीं है। इसलिए यह तत्व व्यवहार करेगा DefaultValueAccessorऔर हम इस तत्व को कोणीय रूपों के साथ उपयोग कर सकते हैं।
अन्यथा आपको अपना स्वयं का कार्यान्वयन प्रदान करना होगा ControlValueAccessor
ControlValueAccessor
कोणीय डॉक्स राज्यों
एक ControlValueAccessor कोणीय रूपों API और DOM में एक मूल तत्व के बीच एक सेतु का काम करता है।
आइए, सरल कोणीय 2 अनुप्रयोग में निम्नलिखित टेम्पलेट लिखें:
<input type="text" [(ngModel)]="userName">
यह समझने के लिए कि हमारा inputउपरोक्त व्यवहार कैसे होगा, हमें यह जानना होगा कि इस तत्व पर कौन से निर्देश लागू किए गए हैं। यहाँ कोणीय त्रुटि के साथ कुछ संकेत देता है:
अनहेल्दीड प्रॉमिस रिजेक्शन: टेम्प्लेट पार्स एरर्स: 'एनमॉडेल' से बंध नहीं सकते क्योंकि यह 'इनपुट' की ज्ञात संपत्ति नहीं है।
ठीक है, हम एसओ खोल सकते हैं और जवाब पा FormsModuleसकते हैं @NgModule: आपके लिए आयात :
@NgModule({
imports: [
...,
FormsModule
]
})
export AppModule {}
हमने इसे आयात किया है और सभी इरादा के अनुसार काम करते हैं। लेकिन हुड के नीचे क्या हो रहा है?
निम्नलिखित निर्देशों के लिए हमारे लिए FormModule निर्यात:
@NgModule({
...
exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {}
कुछ जांच के बाद हमें पता चलता है कि हमारे लिए तीन निर्देश लागू होंगे input
1) NgControlStatus
@Directive({
selector: '[formControlName],[ngModel],[formControl]',
...
})
export class NgControlStatus extends AbstractControlStatus {
...
}
2) एनजीमॉडल
@Directive({
selector: '[ngModel]:not([formControlName]):not([formControl])',
providers: [formControlBinding],
exportAs: 'ngModel'
})
export class NgModel extends NgControl implements OnChanges,
3) DEFAULT_VALUE_ACCESSOR
@Directive({
selector:
`input:not([type=checkbox])[formControlName],
textarea[formControlName],
input:not([type=checkbox])formControl],
textarea[formControl],
input:not([type=checkbox])[ngModel],
textarea[ngModel],[ngDefaultControl]',
,,,
})
export class DefaultValueAccessor implements ControlValueAccessor {
NgControlStatusनिर्देश सिर्फ manipulates वर्गों की तरह ng-valid, ng-touched, ng-dirtyऔर हम उसे यहां छोड़ सकते हैं।
DefaultValueAccesstorNG_VALUE_ACCESSORप्रदाताओं में टोकन प्रदान करता है सरणी:
export const DEFAULT_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DefaultValueAccessor),
multi: true
};
...
@Directive({
...
providers: [DEFAULT_VALUE_ACCESSOR]
})
export class DefaultValueAccessor implements ControlValueAccessor {
NgModelNG_VALUE_ACCESSORएक ही होस्ट तत्व पर घोषित किए गए निर्माता टोकन में निर्देश इंजेक्ट करता है।
export NgModel extends NgControl implements OnChanges, OnDestroy {
constructor(...
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
हमारे मामले NgModelमें इंजेक्शन होगा DefaultValueAccessor। और अब NgModel निर्देश कॉल साझा setUpControlसमारोह:
export function setUpControl(control: FormControl, dir: NgControl): void {
if (!control) _throwError(dir, 'Cannot find control with');
if (!dir.valueAccessor) _throwError(dir, 'No value accessor for form control with');
control.validator = Validators.compose([control.validator !, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator !, dir.asyncValidator]);
dir.valueAccessor !.writeValue(control.value);
setUpViewChangePipeline(control, dir);
setUpModelChangePipeline(control, dir);
...
}
function setUpViewChangePipeline(control: FormControl, dir: NgControl): void
{
dir.valueAccessor !.registerOnChange((newValue: any) => {
control._pendingValue = newValue;
control._pendingDirty = true;
if (control.updateOn === 'change') updateControl(control, dir);
});
}
function setUpModelChangePipeline(control: FormControl, dir: NgControl): void {
control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
// control -> view
dir.valueAccessor !.writeValue(newValue);
// control -> ngModel
if (emitModelEvent) dir.viewToModelUpdate(newValue);
});
}
और यहाँ कार्रवाई में पुल है:
NgModelनियंत्रण (1) और कॉल dir.valueAccessor !.registerOnChangeविधि सेट करता है। (2) प्रॉपर्टी ControlValueAccessorमें कॉलबैक स्टोर करता है और इवेंट (3) होने पर यह कॉलबैक फायर करता है । और अंत में फ़ंक्शन कॉलबैक (4) के अंदर कॉल किया जाता हैonChangeinputupdateControl
function updateControl(control: FormControl, dir: NgControl): void {
dir.viewToModelUpdate(control._pendingValue);
if (control._pendingDirty) control.markAsDirty();
control.setValue(control._pendingValue, {emitModelToViewChange: false});
}
जहां कोणीय कॉल एपीआई बनाता है control.setValue।
यह कैसे काम करता है इसका एक छोटा संस्करण है।