将 FormControl 绑定到指令中的输入

Question

我在通过附加到输入的指令内的 HostBinding 将 formControl 添加到输入时遇到问题。 请让我知道这是否可行，如果可行，该怎么做。

输入

<input matInput 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);
        });
    }
}

Answer 1

要访问 FormControl 引用，您需要使用 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);
        });
    }
}