Question

我通过实施DateInputComponent编写了自己的自定义表单元素ControlValueAccessor，并按照以下方式使用它：

<my-date-input ngControl="date"></my-date-input>

根据我的理解，ngControl是[ngFormControl]="myControlGroup.controls['date']"的语法糖。

现在，在我的DateInputComponent内，我想访问NgFormControl。

我尝试将其与@Input NgFormControl ngFormControl;绑定，但它永远不会被设置，我尝试将其注入DateInputComponent(NgFormControl ngFormControl)但由于没有提供商而失败。

获得它的正确方法是什么？

（也许我也是以错误的方式接近它...我希望此DateInputComponent能够自行显示所有可能发生的验证错误。）

Answer 1

你采用正确的方法注入指令，但问题是虽然ngControl可以被认为是NgFormControl的语法糖，但它不是同一个类。

所有表单控件都从NgControl扩展，这是您应该注入组件的内容。 DateInputComponent(NgControl ngControl)

所有表单指令都可以互换使用，因此它们都提供NgControl作为它们所暴露的接口。这允许日期组件的用户使用适用于其用例的任何指令：

NgModel：如果他们只是想提供或倾听价值
NgFormControl：如果他们想提供控件
NgControlName：如果他们想在ControlMap中使用字符串标识符（这是您在上面使用的那个）

Answer 2

我让它使用解决方案this comment建议：通过注入Injector并从中读取NgControl：

class DateInputComponent implements ControlValueAccessor, AfterViewInit {
  Injector _injector;
  DateInputComponent(this._injector);

  NgControl control;

  @override
  ngAfterViewInit() {
    control = _injector.get(NgControl).control;
  }
}

正如Ted建议的那样，直接注入NgControl并不起作用，因为它会导致循环依赖。

尝试访问构造函数中的NgControl无法正常工作，因为它还不可用。

如何在自定义Ng2表单元素中访问NgFormControl

2 个答案: