我有一个自定义元素:
<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 时,我收到一条错误消息:
错误错误:没有名称的表单控件的值访问器:’surveyType’
我尝试添加ngDefaultControl但没有成功。似乎是因为没有输入/选择......我不知道该怎么做。
ngDefaultControl
我想将我的点击绑定到这个 formControl,以便当有人点击整个卡片时,会将我的“类型”推送到 formControl 中。可能吗?
您formControlName只能在实现ControlValueAccessor.
formControlName
ControlValueAccessor
所以,为了做你想做的事,你必须创建一个实现的组件ControlValueAccessor,这意味着 实现以下三个功能 :
writeValue
registerOnChange
registerOnTouched
然后,你必须告诉 Angular 这个指令是一个ControlValueAccessor(接口不会删掉它,因为当 TypeScript 编译成 JavaScript 时它会从代码中剥离)。您可以通过 注册提供者 来做到这一点。
提供者应提供NG_VALUE_ACCESSOR并使用现有值。你还需要一个forwardRef这里。注意NG_VALUE_ACCESSOR应该是一个多提供者。
NG_VALUE_ACCESSOR
forwardRef
例如,如果您的自定义指令名为 MyControlComponent,您应该在传递给@Component装饰器的对象中添加以下内容:
@Component
providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => MyControlComponent), } ]
您的组件已准备好使用。使用模板驱动的表单,ngModel绑定现在可以正常工作。
ngModel
使用响应式表单,您现在可以正确使用formControlName并且表单控件将按预期运行。