javascript - react - node js



কৌণিক কক্ষে NGDefaultControl কি? (1)

না, এটি কোনও সদৃশ প্রশ্ন নয়। আপনি দেখুন, এসও এবং [(ngModel)] প্রশ্ন ও সমস্যা রয়েছে যা [(ngModel)] যে আমি এই নির্দেশকে একটি ট্যাগে যুক্ত করছি যার [(ngModel)] নির্দেশ রয়েছে এবং কোনও ফর্মের মধ্যে নেই। আমি এটি যুক্ত না করলে আমি একটি ত্রুটি পেয়েছি:

ERROR Error: No value accessor for form control with unspecified name attribute

ঠিক আছে, আমি এই বৈশিষ্ট্যটি সেখানে রাখলে ত্রুটি চলে যায়। কিন্তু অপেক্ষা করো! কেউ কি জানে না এটি কী করে! এবং অ্যাঙ্গুলার ডক এটি মোটেই উল্লেখ করে না। আমার যখন এটির প্রয়োজন নেই তখন আমি কেন আমার মূল্য সংযোজনকারী প্রয়োজন? এই বৈশিষ্ট্যটি কীভাবে মান অ্যাক্সেসরগুলির সাথে সংযুক্ত রয়েছে? এই নির্দেশনাটি কী করে? একটি মান অ্যাসেসার কী এবং আমি কীভাবে এটি ব্যবহার করব?

এবং কেন সকলেই এমন কাজ করে চলে যা তারা বোঝে না? কোডের এই লাইনটি কেবল যুক্ত করুন এবং এটি কাজ করে, আপনাকে ধন্যবাদ, ভাল প্রোগ্রাম লেখার উপায় এটি নয়।

এবং তারপর. আমি ngModel ফর্মগুলির জন্য একটি নয় দুটি বিশাল গাইড এবং ngModel সম্পর্কে একটি বিভাগ ngModel :

এবং আপনি কি জানেন? মান অ্যাক্সেসর বা ngDefaultControl উল্লেখ নেই। এটা কোথায়?

https://src-bin.com


Answer #1

[NgDefaultControl]

তৃতীয় পক্ষের নিয়ন্ত্রণগুলির কৌণিক ফর্মগুলির সাথে কাজ করার জন্য একটি ControlValueAccessor প্রয়োজন। তাদের মধ্যে অনেকেই পলিমারের <paper-input> মতো <input> নেটিভ এলিমেন্টের মতো আচরণ করেন এবং এটি DefaultValueAccessor ব্যবহার করতে পারেন। একটি ngDefaultControl বৈশিষ্ট্য যুক্ত করা তাদের সেই নির্দেশিকা ব্যবহারের অনুমতি দেবে।

<paper-input ngDefaultControl [(ngModel)]="value>

অথবা

<paper-input ngDefaultControl formControlName="name">

সুতরাং এই অ্যাট্রিবিউটটি চালু হওয়ার মূল কারণ।

এঙ্গুলার 2 এর আলফা সংস্করণগুলিতে একে ng-default-control বৈশিষ্ট্য বলা হয়েছিল।

সুতরাং ngDefaultControl DefaultValueAccessor নির্দেশিকার জন্য DefaultValueAccessor নির্বাচক:

@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

কৌণিক ডকস সূচিত করে

একটি কন্ট্রোলভ্যালুএ্যাকসেসর অ্যাঙ্গুলার ফর্ম এপিআই এবং ডিওমে একটি নেটিভ উপাদানগুলির মধ্যে একটি সেতু হিসাবে কাজ করে।

আসুন সাধারণ কৌণিক 2 প্রয়োগে নিম্নলিখিত টেমপ্লেটটি লিখি:

<input type="text" [(ngModel)]="userName">

আমাদের উপরের input কীভাবে আচরণ করবে তা বোঝার জন্য আমাদের এই উপাদানটির সাথে কোন দিকনির্দেশনা প্রয়োগ করা হবে তা জানতে হবে। এখানে কৌণিক ত্রুটি সহ কিছু ইঙ্গিত দেয়:

আনহ্যান্ডলেড প্রতিশ্রুতি প্রত্যাখ্যান: টেমপ্লেট বিশ্লেষণ ত্রুটিগুলি: 'এনজিমোডেল' এর সাথে আবদ্ধ হতে পারে না কারণ এটি 'ইনপুট' এর পরিচিত সম্পত্তি নয়।

ঠিক আছে, আমরা এসও খুলতে পারি এবং উত্তরটি পেতে @NgModule : আপনার @NgModule FormsModule আমদানি করুন:

@NgModule({
  imports: [
    ...,
    FormsModule
  ]
})
export AppModule {}

আমরা এটিকে আমদানি করেছিলাম এবং সমস্ত কাজের উদ্দেশ্যে। তবে হুডের নীচে কী চলছে?

নিম্নলিখিত নির্দেশাবলী আমাদের জন্য FormsModule রফতানি করে:

@NgModule({
 ...
  exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {}

কিছু তদন্তের পরে আমরা আবিষ্কার করতে পারি যে আমাদের ইনপুটটিতে তিনটি নির্দেশনা প্রয়োগ করা হবে

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 NgControlStatus , ng-dirty ক্লাসগুলি পরিচালনা করে এবং আমরা এটি এখানে বাদ দিতে পারি।

DefaultValueAccesstor সরবরাহকারী অ্যারেতে NG_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 নির্দেশক NgModel ইনজেক্ট করে NG_VALUE_ACCESSOR টোকেন যা একই হোস্ট উপাদানটিতে ঘোষণা করা হয়েছিল।

export NgModel extends NgControl implements OnChanges, OnDestroy {
 constructor(...
  @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {

আমাদের ক্ষেত্রে 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 পদ্ধতিতে কল করে। ControlValueAccessor onChange (২) প্রোপার্টে কলব্যাক সঞ্চয় করে এবং input ইভেন্টটি ঘটলে এই onChange ফায়ার করে (3) । এবং অবশেষে updateControl ফাংশন updateControl কলব্যাক ভিতরে কল করা হয় (4)

function updateControl(control: FormControl, dir: NgControl): void {
  dir.viewToModelUpdate(control._pendingValue);
  if (control._pendingDirty) control.markAsDirty();
  control.setValue(control._pendingValue, {emitModelToViewChange: false});
}

যেখানে কৌণিক কলগুলি API control.setValue . control.setValue গঠন করে।

এটি কীভাবে কাজ করে তার একটি সংক্ষিপ্ত সংস্করণ।





angular