angular - कोणीय में कस्टम फॉर्म घटक से फॉर्मकंट्रोल तक पहुंच प्राप्त करें




angular-forms (3)

मेरे कोणीय अनुप्रयोग में एक कस्टम फ़ॉर्म नियंत्रण घटक है, जो ControlValueAccessor इंटरफ़ेस को लागू ControlValueAccessor है।

हालाँकि, मैं अपने घटक के साथ जुड़े, FormControl उदाहरण का उपयोग करना चाहता हूँ। मैं FormBuilder साथ प्रतिक्रियाशील रूपों का उपयोग कर रहा हूं और formControlName विशेषता का उपयोग करके प्रपत्र नियंत्रण प्रदान कर रहा हूं।

एसओ, मैं अपने कस्टम फॉर्म घटक के अंदर से FormControl उदाहरण का उपयोग कैसे करूं?


2019 में यहां आने वाले किसी भी व्यक्ति के लिए, कोणीय 6/7 + के साथ, समाधान जो एक डिप्रेसेशन चेतावनी नहीं फेंकता है वह इस उत्तर में वर्णित है:

https://.com/a/56061527/134120

अधिक विवरण के लिए, इस प्रस्तुति को देखें , जैसा कि ऊपर वर्णित है।


एक formControlName पैरामीटर के रूप में formControlName का उपयोग करते समय [formControl] निर्देश के माध्यम से बाध्यकारी नहीं होता है।

यहां एक समाधान है जो किसी भी इनपुट मापदंडों के बिना दोनों तरीकों से काम करता है।

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
    }
  }
}


यह समाधान कोणीय रिपॉजिटरी में चर्चा से पैदा हुआ था। कृपया, यदि आप इस समस्या में रुचि रखते हैं, तो इसे पढ़ना या भाग लेना बेहतर है।

मैंने 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 कर रहा हूँ और फिर FormControl से नियंत्रण नाम का उपयोग करके formControlName बाइंडिंग प्राप्त कर रहा हूँ।

हालांकि, यह सलाह दी जाती है कि यह समाधान विशेष रूप से उपयोग के मामले के लिए तैयार किया जाता है जहां मेजबान तत्व पर FormControlName निर्देश का उपयोग किया जाता है। यह अन्य मामलों में काम नहीं करेगा। इसके लिए आपको कुछ अतिरिक्त तर्क जोड़ने होंगे। यदि आपको लगता है, कि यह कोणीय द्वारा संबोधित किया जाना चाहिए, तो चर्चा पर जाना सुनिश्चित करें।