angular - কৌণিক কাস্টম ফর্ম উপাদান থেকে ফর্মকন্ট্রোল অ্যাক্সেস পান




angular-forms (3)

@ রিতেশ ইতিমধ্যে মন্তব্যে লিখেছেন আপনি ইনপুট বাইন্ডিং হিসাবে ফর্ম নিয়ন্ত্রণটি পাস করতে পারেন:

<my-custom-form-component [control]="myForm.get('myField')" formControlName="myField">
</my-custom-form-component>

এবং তারপরে আপনি নিজের কাস্টম ফর্ম উপাদানটির ভিতরে ফর্ম নিয়ন্ত্রণ উদাহরণ পেতে পারেন:

@Input() control: FormControl;

আমার কৌনিক অ্যাপ্লিকেশনটিতে আমার একটি কাস্টম ফর্ম নিয়ন্ত্রণ উপাদান রয়েছে যা ControlValueAccessor ইন্টারফেস প্রয়োগ করে।

তবে আমি আমার উপাদানগুলির সাথে যুক্ত FormControl উদাহরণটি অ্যাক্সেস করতে চাই। আমি FormBuilder সাথে প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করছি এবং formControlName বৈশিষ্ট্যটি ব্যবহার করে ফর্ম নিয়ন্ত্রণ সরবরাহ করছি।

সুতরাং, আমি কীভাবে আমার কাস্টম ফর্ম উপাদানটির অভ্যন্তর থেকে FormControl উদাহরণটি অ্যাক্সেস FormControl ?


এই সমাধানটি কৌণিক ভাণ্ডারে আলোচনা থেকে জন্মগ্রহণ করেছিল । দয়া করে এটি পড়ার বিষয়টি নিশ্চিত করুন বা আপনি যদি এই সমস্যায় আগ্রহী হন তবে অংশ নেওয়া আরও ভাল।

আমি FormControlName নির্দেশিকার কোডটি অধ্যয়ন করেছি এবং এটি আমাকে নিম্নলিখিত সমাধানটি লিখতে অনুপ্রাণিত করেছে:

@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: CustomFormComponent,
    multi: true
  }]
})
export class CustomFormComponent implements ControlValueAccessor, OnInit {

  @Input() formControlName: string;

  private control: AbstractControl;


  constructor (
    @Optional() @Host() @SkipSelf()
    private controlContainer: ControlContainer
  ) {
  }


  ngOnInit () {

    if (this.controlContainer) {
      if (this.formControlName) {
        this.control = this.controlContainer.control.get(this.formControlName);
      } else {
        console.warn('Missing FormControlName directive from host element of the component');
      }
    } else {
      console.warn('Can\'t find parent FormGroup directive');
    }

  }

}

আমি FormGroup প্যারেন্ট FormGroup ইনজেকশন দিচ্ছি এবং তারপরে formControlName বাইন্ডিংয়ের মাধ্যমে প্রাপ্ত নিয়ন্ত্রণ নাম ব্যবহার করে এটি থেকে নির্দিষ্ট FormControl formControlName

তবে, পরামর্শ দিন, যে সমাধানটি বিশেষত ব্যবহারের ক্ষেত্রে তৈরি করা হয়েছে যেখানে হোস্ট উপাদানটির উপর FormControlName নির্দেশিকা ব্যবহৃত হয়। এটি অন্যান্য ক্ষেত্রে কাজ করবে না। এর জন্য আপনাকে কিছু অতিরিক্ত যুক্তি যুক্ত করতে হবে। আপনি যদি মনে করেন, এটি কৌণিক দ্বারা সমাধান করা উচিত, তবে আলোচনাটি অবশ্যই দেখার জন্য নিশ্চিত হন।


[formControl] নির্দেশিকার মাধ্যমে বাঁধাইয়ের সময় formControlName ইনপুট প্যারামিটার হিসাবে ব্যবহার করা কাজ করে না।

এখানে একটি সমাধান যা কোনও ইনপুট পরামিতি ছাড়াই উভয় উপায়ে কাজ করে।

export class MyComponent implements AfterViewInit {

  private control: FormControl;

  constructor(
    private injector: Injector,
  ) { }

  // The form control is only set after initialization
  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      this.control = ngControl.control as FormControl;
    } else {
      // Component is missing form control binding
    }
  }
}