javascript - Angular4 - 没有表单控件的值访问器

Question

我有一个自定义元素:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

当我尝试添加 formControlName 时，我收到一条错误消息:

ERROR Error: No value accessor for form control with name: 'surveyType'

我尝试添加 ngDefaultControl 但没有成功。好像是因为没有input/select... 不知道怎么办。

我想将我的点击绑定(bind)到此 formControl，以便当有人点击整张卡片时将我的“类型”推送到 formControl。可能吗？

Answer 1

您只能在实现 ControlValueAccessor 的指令上使用 formControlName .

实现接口(interface)

所以，为了做你想做的事，你必须创建一个实现 ControlValueAccessor 的组件。 ，这意味着实现以下三个功能:

• writeValue(告诉 Angular 如何将值从模型写入 View )
• registerOnChange(注册一个在 View 改变时调用的处理函数)
• registerOnTouched(注册一个在组件接收到触摸事件时调用的处理程序，对于了解码件是否已获得焦点很有用)。

注册提供商

然后，你必须告诉 Angular 这个指令是一个 ControlValueAccessor(接口(interface)不会削减它，因为当 TypeScript 被编译成 JavaScript 时它会从代码中剥离)。您可以通过注册 vendor 来做到这一点。

提供商应提供NG_VALUE_ACCESSOR和 use an existing value .您还需要一个 forwardRef这里。请注意，NG_VALUE_ACCESSOR 应该是 multi provider .

例如，如果您的自定义指令名为 MyControlComponent，您应该在传递给 @Component 装饰器的对象中添加以下内容:

providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyControlComponent),
  }
]

用法

您的组件可以使用了。用template-driven forms , ngModel 绑定(bind)现在可以正常工作。

与 reactive forms ，您现在可以正确使用 formControlName 并且表单控件将按预期运行。

资源

• Custom Form Controls in Angular by Thoughtram
• Angular Custom Form Controls with Reactive Forms and NgModel by Cory Rylan