HostBinding a FormControl to a input within a Directive

Question

I am having trouble adding a formControl to a input via a HostBinding inside a directive attached to the Input. Please let me know if this is a possible approach and if so how to do it.

Input

<input matInput searchInput>

The Directive (searchInput)

@Directive({
    selector: '[searchInput]',
})
export class SearchableSelectDirective implements AfterViewInit {
    @HostBinding('attr.[formControl]') control: FormControl = new FormControl('');

    ngAfterViewInit(): void {
        this.sub = this.control.valueChanges.subscribe((value: string) => {
            console.log(value);
        });
    }
}

score 2 · Accepted Answer · answered May 01 '20 at 15:28

2

To access the FormControl reference you need to use NgControl

@Directive({
    selector: '[searchInput]',
})
export class SearchableSelectDirective implements AfterViewInit {
    sub: any;
    constructor(private ngControl: NgControl) {}

    ngAfterViewInit(): void {
        this.sub = this.ngControl.valueChanges.subscribe((value: string) => {
            console.log(value);
        });
    }
}

answered May 01 '20 at 15:28

John Velasquez

3,421
2
18
23

I need to create and attach the FormControl from the directive itself – Sachith Rukshan May 01 '20 at 15:44
yes you need to add the `formControl` or `formControlName` in the input element – John Velasquez May 01 '20 at 16:09
what i need to do is attach the formcontrol through directive not the html – Sachith Rukshan May 01 '20 at 16:49

HostBinding a FormControl to a input within a Directive

1 Answers1