कोणीय 2 v.2.3 - निर्देश का उपयोग फॉर्मकंट्रोलनाम सिंटैक्स

Question

के माध्यम से बनाए गए फॉर्मकंट्रोल तक पहुंचने का निर्देश है, इसलिए मैं एक निर्देश बनाने की कोशिश कर रहा हूं जो फॉर्मकंट्रोल में हेरफेर कर सकता है।

ऐसा लगता है कि यदि मैं टेम्पलेट में फॉर्म नियंत्रण घोषित करने के लिए लंबे वाक्यविन्यास का उपयोग करता हूं, तो मैं इसे सीधे @ इनपुट() बाइंड के रूप में सामग्री के साथ करने के निर्देश पर नियंत्रण पास कर सकता हूं; अर्थात्:

<form [formGroup]="myForm"> 
    <input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive> 
</form> 

और निम्न घटक तर्क: निम्नलिखित टेम्पलेट के साथ

@Component({ 
    // Properties go here. 
}) 
class MyComponent { 
    myForm: FormGroup; 

    constructor(fb: FormBuilder) { 
     // Constructor logic... 
    } 

    ngOnInit() { 
     this.myForm = this.fb.group({ 
      "myText": [""] 
     }); 
    } 
} 

निर्देश लगेगा जैसे:

@Directive({ 
    selector: "[my-directive]" 
}) 
class MyDirective { 
    Input() formControl: FormControl; 
} 

लेकिन अगर मैं में formControlName सिंटैक्स का उपयोग कर रहे थे इसके बजाय टेम्पलेट:

<form [formGroup]="myForm"> 
    <input type="text" id="myText" formControlName="myText" my-directive> 
</form> 

मैं निर्देश में फॉर्मकंट्रोल (अंतर्निहित?) का संदर्भ कैसे दूंगा?

Answer 1

आप NgControl, ElementRef, HostListener और निर्माता इंजेक्शन का उपयोग अगर हम एक निर्देश लागू या तो formControlName या [formControl] आड़ और यहां तक ​​कि टेम्प्लेट संचालित रूपों में प्रतिक्रियाशील रूपों से नियंत्रण के रूप में हो सकता है:

import { Directive, ElementRef, HostListener } from "@angular/core"; 
import { NgControl } from "@angular/forms"; 

@Directive({ 
    selector: '[my-directive]' 
}) 
export class MyDirective { 
    constructor(private el: ElementRef, private control : NgControl) { } 

    @HostListener('input',['$event']) onEvent($event){ 
    let valueToTransform = this.el.nativeElement.value; 
    // do something with the valueToTransform 
    this.control.control.setValue(valueToTransform); 
    } 
} 

यहाँ एक applicable demo

है

Answer 2

@silentsod उत्तर बेकार ढंग से काम करेगा।

1. यदि आपको कुंजी-प्रेस अप/डाउन या किसी अन्य ईवेंट जैसे कई ईवेंट प्रबंधित करने की आवश्यकता है, तो आप नीचे के दृष्टिकोण के साथ जा सकते हैं।
2. साथ ही, निर्देशों में घटनाओं को परिभाषित करना बेहतर है।

import { Directive, ElementRef} from "@angular/core"; 
import { NgControl } from "@angular/forms"; 

@Directive({ 
    selector: '[my-directive]', 
    host: { 
    '(input)':'onEvent($event)', 
    '(keydown.backspace)': 'onEvent($event, true)' 
}) 
export class MyDirective { 
    constructor(private el: ElementRef, private control : NgControl) { } 

    public onEvent($event, someEvent){ 
    let valueToTransform = this.el.nativeElement.value; 
    // do something with the valueToTransform 
    if(someEvent) { 
    //do something 
    } 
    this.control.control.setValue(valueToTransform); 
    } 
} 

एचटीएमएल

<form [formGroup]="myForm"> 
<input type="text" id="myText" formControlName="myText" my-directive> 
</form>