[এনজিডিফল্টকন্ট্রোল]
তৃতীয় পক্ষের নিয়ন্ত্রণগুলির ControlValueAccessorকৌণিক ফর্মগুলির সাথে কাজ করতে একটি প্রয়োজন । তাদের মধ্যে অনেকেই পলিমারের <paper-input>মতো <input>দেশীয় উপাদানটির মতো আচরণ করেন এবং এটি ব্যবহার করতে পারেন DefaultValueAccessor। একটি ngDefaultControlবৈশিষ্ট্য যুক্ত করা তাদের সেই নির্দেশনাটি ব্যবহার করার অনুমতি দেবে।
<paper-input ngDefaultControl [(ngModel)]="value>
বা
<paper-input ngDefaultControl formControlName="name">
সুতরাং এই অ্যাট্রিবিউটটি চালু হওয়ার মূল কারণ।
এঙ্গুলার 2 এর আলফা সংস্করণগুলিতেng-default-control এট্রিবিউট বলা হত ।
ডিফল্টভ্যালুএ্যাকসেসর নির্দেশের 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
কন্ট্রোলভ্যালুএ্যাকসেসর
কৌণিক ডকস সূচিত করে
একটি কন্ট্রোলভ্যালুএ্যাকসেসর অ্যাঙ্গুলার ফর্ম এপিআই এবং ডিওমে একটি নেটিভ উপাদানগুলির মধ্যে একটি সেতু হিসাবে কাজ করে।
আসুন সাধারণ কৌণিক 2 প্রয়োগে নিম্নলিখিত টেমপ্লেটটি লিখি:
<input type="text" [(ngModel)]="userName">
আমাদের উপরেরগুলি কীভাবে inputআচরণ করবে তা বোঝার জন্য আমাদের এই উপাদানটির সাথে কোন নির্দেশাবলী প্রয়োগ করা হবে তা জানতে হবে। এখানে কৌণিক ত্রুটি সহ কিছু ইঙ্গিত দেয়:
আনহ্যান্ডলড প্রতিশ্রুতি প্রত্যাখ্যান: টেমপ্লেট বিশ্লেষণ ত্রুটিগুলি: 'এনজিমোডেল' এর সাথে আবদ্ধ হতে পারে না কারণ এটি 'ইনপুট' এর পরিচিত সম্পত্তি নয়।
ঠিক আছে, আমরা এসও খুলতে পারি এবং উত্তর পেতে পারি: FormsModuleআপনার আমদানি করুন @NgModule:
@NgModule({
imports: [
...,
FormsModule
]
})
export AppModule {}
আমরা এটিকে আমদানি করেছিলাম এবং সমস্ত কাজের উদ্দেশ্যে। তবে হুডের নীচে কী চলছে?
নিম্নোক্ত নির্দেশিকাটি আমাদের জন্য ফর্মমডুল রফতানি করে:
@NgModule({
...
exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {}
কিছু তদন্তের পরে আমরা আবিষ্কার করতে পারি যে তিনটি নির্দেশাবলী আমাদের প্রয়োগ করা হবে input
1) এনগকন্ট্রোলস্ট্যাটাস
@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নির্দেশ মাত্র নিপূণভাবে ব্যবহার করেন শ্রেণীর পছন্দ 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 {
NgModelনির্দেশকটি NG_VALUE_ACCESSORএকই হোস্ট উপাদান হিসাবে ঘোষিত কন্সট্রাক্টর টোকনে ইনজেকশন দেয় ।
export NgModel extends NgControl implements OnChanges, OnDestroy {
constructor(...
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
আমাদের ক্ষেত্রে NgModelইনজেকশন হবে DefaultValueAccessor। এবং এখন এনজিএমডেল নির্দেশিত কলগুলি ভাগ করা 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) => {
dir.valueAccessor !.writeValue(newValue);
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।
এটি কীভাবে কাজ করে তার একটি সংক্ষিপ্ত সংস্করণ।