动态表单中自定义表单组件上的 ControlValueAccessor

Question

我根据本教程实现了一个动态表单。我想向动态表单添加简单的文本输入和自定义组件（Mapbox GL JS）。

我的问题是我无法访问 Mapbox 数据。Mapbox 组件实现了 ControlValueAccessor 但我不知道如何将信息传递给表单。

我创建了一个 StackBlitz，您可以在其中找到我的设置：https ://stackblitz.com/edit/angular-xrkftm

我的目标是在表单下方显示表单信息（文本输入和 Mapbox 标记位置）。

我不知道在哪里添加[formControlName]="config.name"。目前它在map.component.ts但我想它需要在父组件上实现。

Answer 1

加载时有几个错误：我可以修复其中一些错误。在 DynamicFormComponent 中，您应该使用您的配置来创建所有控件：&nbsp;createGroup() {&nbsp; &nbsp; const group = this.fb.group({});&nbsp; &nbsp; this.config.forEach(control => {&nbsp; &nbsp; &nbsp; group.addControl(control.name, this.createControl(control))&nbsp; &nbsp; });&nbsp; &nbsp; return group;&nbsp; }MapComponent：您应该将结果写回表单&nbsp;_onChange = (geometry: any) => {&nbsp; &nbsp; &nbsp;...&nbsp;&nbsp; &nbsp; &nbsp;this.group.patchValue({[this.config.name]: this.geometry});&nbsp;}但是仍然存在一些错误，请检查控制台。如果将 map.component.html 更改为：<div>&nbsp; &nbsp; <label>{{ config.label }}</label>&nbsp; &nbsp; <div #map class="map"></div></div>所有错误都消失了，因为它不是有效的角度值访问器。