![](/img/trans.png)
[英]Binding ngModel of custom form control (ControlValueAccessor) always sets form to dirty state
[英]ControlValueAccessor on Custom Form Component in Dynamic Form
我根据本教程实现了一个动态表单。 我想将简单的文本输入和自定义组件(Mapbox GL JS)添加到动态表单中。
我的问题是我无法访问 Mapbox 数据。 Mapbox 组件实现了一个 ControlValueAccessor,但我不知道如何将信息传递给表单。
我创建了一个 StackBlitz,您可以在其中找到我的设置: https://stackblitz.com/edit/angular-xrkftm
我的目标是在表单下方显示表单信息(文本输入和 Mapbox 标记位置)。
我不知道在哪里添加[formControlName]="config.name"
。 目前它在map.component.ts
但我想它需要在父组件上实现。
加载有几个错误:我可以修复其中的一些。 在 DynamicFormComponent 你应该使用你的配置来创建所有的控件:
createGroup() {
const group = this.fb.group({});
this.config.forEach(control => {
group.addControl(control.name, this.createControl(control))
});
return group;
}
MapComponent:您应该将结果写回表单
_onChange = (geometry: any) => {
...
this.group.patchValue({[this.config.name]: this.geometry});
}
但是仍然存在一些错误,请检查控制台。 如果将 map.component.html 更改为:
<div>
<label>{{ config.label }}</label>
<div #map class="map"></div>
</div>
所有错误都消失了,因为它不是有效的 angular 值访问器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.