Question

我基于this tutorial实现了动态表单。我想将简单的文本输入和自定义组件（Mapbox GL JS）添加到动态表单。

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

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

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

我不知道在何处添加[formControlName]="config.name"。当前它位于map.component.ts中，但我想它需要在父组件上实现。

Answer 1

加载时有几个错误：我可以修复其中的一些。在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>

所有错误消失了，因为它不是有效的角度值访问器。

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

1 个答案: