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 错误：没有名称的表单控件的值访问器：

‘调查类型’

我尝试添加 ngDefaultControl 没有成功。

似乎是因为没有输入/选择……我不知道该怎么做。

我想将我的点击绑定到这个formControl，以便当有人点击整个卡片时，会将我的“类型”推入formControl。可能吗？

原文由 jbtd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

实现接口

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

• writeValue （告诉 Angular 如何将值从模型写入视图）

• registerOnChange （注册一个在视图改变时调用的处理函数）

• registerOnTouched （注册一个在组件接收到触摸事件时调用的处理程序，用于了解组件是否已获得焦点）。

注册提供者

然后，你必须告诉 Angular 这个指令是一个 ControlValueAccessor （接口不会切断它，因为当 TypeScript 被编译成 JavaScript 时它会从代码中剥离）。您可以通过 注册提供者 来做到这一点。

提供者应提供 NG_VALUE_ACCESSOR 并 使用现有值。您还需要一个 forwardRef 。注意 NG_VALUE_ACCESSOR 应该是一个 多提供者。

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

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

用法

您的组件已准备好使用。使用 模板驱动的表单， ngModel 绑定现在可以正常工作。

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

资源

• Thoughtram 在 Angular 中自定义表单控件

• 带有反应式表单和 NgModel 的 Angular 自定义表单控件， 作者 Cory Rylan

原文由 Lazar Ljubenović 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您应该在 input 而不是 formControlName="surveyType" 上使用 div

原文由 Vega 发布，翻译遵循 CC BY-SA 4.0 许可协议