javascript - Angular4-没有用于表单控制的值访问器(Angular4 - No value accessor for form control)

Question

I have a custom element :(我有一个自定义元素：)

<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> When I try to add the formControlName, I get an error message:(当我尝试添加formControlName时，出现错误消息：) ERROR Error: No value accessor for form control with name: 'surveyType'(错误错误：名称为“ surveyType”的表单控件无值访问器) I tried to add ngDefaultControl without success.(我尝试添加ngDefaultControl失败。) It seems it's because there is no input/select... and I dont know what to do.(似乎是因为没有输入/选择...，我不知道该怎么办。) I would like to bind my click to this formControl in order that when someone clicks on the entire card that would push my 'type' into the formControl.(我想将我的点击绑定到此formControl，以便当有人单击整个卡片时会将我的“类型”推入formControl。) Is it possible?(可能吗？)   ask by jbtd translate from so

Answer 1

You can use formControlName only on directives which implement ControlValueAccessor .(您只能在实现ControlValueAccessor指令上使用formControlName 。)

Implement the interface(实施接口) So, in order to do what you want, you have to create a component which implements ControlValueAccessor , which means implementing the following three functions :(因此，为了做您想做的事情，您必须创建一个实现ControlValueAccessor的组件，这意味着实现以下三个功能 ：) writeValue (tells Angular how to write value from model into view)(writeValue （告诉Angular如何将模型中的值写入视图）) registerOnChange (registers a handler function that is called when the view changes)(registerOnChange （注册在视图更改时调用的处理函数）) registerOnTouched (registers a handler to be called when the component receives a touch event, useful for knowing if the component has been focused).(registerOnTouched （注册当组件接收到触摸事件时要调用的处理程序，对于了解组件是否已聚焦很有用）。) Register a provider(注册提供商) Then, you have to tell Angular that this directive is a ControlValueAccessor (interface is not gonna cut it since it is stripped from the code when TypeScript is compiled to JavaScript).(然后，您必须告诉Angular该指令是ControlValueAccessor （由于TypeScript编译为JavaScript时会从代码中剥离接口，因此该接口不会被剪切）。) You do this by registering a provider .(您可以通过注册提供者来实现 。) The provider should provide NG_VALUE_ACCESSOR and use an existing value .(提供者应提供NG_VALUE_ACCESSOR并使用现有值 。) You'll also need a forwardRef here.(您在这里还需要一个forwardRef 。) Note that NG_VALUE_ACCESSOR should be a multi provider .(注意NG_VALUE_ACCESSOR应该是一个多提供程序 。) For example, if your custom directive is named MyControlComponent, you should add something along the following lines inside the object passed to @Component decorator:(例如，如果您的自定义指令名为MyControlComponent，则应在传递给@Component装饰器的对象内的以下几行中添加一些内容：) providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => MyControlComponent), } ] Usage(用法) Your component is ready to be used.(您的组件已准备就绪，可以使用。) With template-driven forms , ngModel binding will now work properly.(使用模板驱动的表单 ， ngModel绑定现在将正常工作。) With reactive forms , you can now properly use formControlName and the form control will behave as expected.(使用反应式表单 ，您现在可以正确使用formControlName ，并且表单控件将按预期运行。) Resources(资源资源) Custom Form Controls in Angular by Thoughtram(Thoughtram 在Angular中的自定义窗体控件) Angular Custom Form Controls with Reactive Forms and NgMode by Cory Rylan(具有反应形式和NgMode的角度自定义形式控件，作者 ：Cory Rylan)