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 вы должны использовать свою конфигурацию для создания всех элементов управления:

 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>

, все ошибки исчезнут, поскольку это недопустимый метод доступа к угловым значениям.