Question

我不是在谈论ngModel的价值，而是与该模型相关的FormControl。我想要做的是为FormControl添加一个条目。

@Directive({
    selector: 'input',
})
export class InputDirective implements OnInit {
    constructor(private element: ElementRef) {
        debugger;
    }

    ngOnInit() {
        // how to I access the FormControl from here?
    }
}

Answer 1

要访问 Attribute Directive 中的输入元素的ngModel表单控件，您可以将 NgControl 注入到指令的控制器，Angular DI框架将提供最接近的表单控件实例：

@Directive({
   selector: '[input-directive]',
})
export class InputDirective implements OnInit {
   constructor(private control: NgControl, private el: ElementRef) { }
}

请查看此Stackblitz以获取示例。

要将表单控件提供给 Component ，您可以使用模板变量，该变量将与ngModel FormControl实例一起分配，并将其作为输入传递给组件，像这样：

<input [(ngModel)]="name" #ctrl="ngModel" required>    
<example-app [name]="ctrl"></example-app>

请查看此Stackblitz以获取示例。

Answer 2

结果就像将control: NgModel注入构造函数一样简单。

constructor(private element: ElementRef, control: NgModel) {}

编辑：完整指令：

@Directive({
    selector: '[ngModel]',
})
export class InputDirective {
    constructor(private element: ElementRef, ngModel: NgModel) {
        const formControl = ngModel.control as FormModel;

        formControl.name = this.element.nativeElement.name;

        this.element.nativeElement.onblur = () => {
            if (formControl) {
                formControl.isBlurred = true;
            }
        };
    }
}

如何从指令/组件访问ngModel的FormControl

2 个答案: