Нет доступа к значению для управления формой с именем: ... с Mapbox GL

Question

Я бы хотел добавить карту Mapbox GL JS в качестве элемента формы в мое ионное приложение. Моя форма генерируется динамически на основе этого примера (https://ultimatecourses.com/blog/angular-dynamic-components-forms).

Помимо обычных компонентов, таких как входные данные, я также хочу добавить карту Mapbox GL в форму. Я создал компонент, который реализует ControlValueAccessor, но все же яполучить ошибку No value accessor for form control with name: ...

Мой компонент Mapbox выглядит следующим образом:

import { Component, AfterViewInit, Input, forwardRef, ViewChild, HostBinding } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';

import mapboxgl from 'mapbox-gl';

import { Field } from '../../dynamic-form/models/field';
import { FieldConfig } from '../../dynamic-form/models/field-config';

@Component({
  selector: 'app-map',
  template: `
  <div [formGroup]="group">
    <label>{{ config.label }}</label>
    <div #map class="map" [formControlName]="config.name"></div>
  </div>
  `,
  styleUrls: ['./map.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MapComponent),
      multi: true
    }
  ]
})
export class MapComponent implements AfterViewInit, ControlValueAccessor, Field {

  writeValue(obj: any): void {
    this.geometry = obj
  }
  registerOnChange(fn: any): void {
    this._onChange = fn
  }
  registerOnTouched(fn: any): void {
    this._onTouched = fn
  }
  setDisabledState?(isDisabled: boolean): void {
    throw new Error("Method not implemented.");
  }

  @ViewChild('map') mapContainer;

  marker: any;
  map: mapboxgl.Map;
  geometry: any;

  config: FieldConfig
  group: FormGroup

  constructor() { }

  ngAfterViewInit() {
    this.initMap();
  }

  _onChange = (geometry: any) => {
    if (geometry != null) {
      if (!this.marker) {
        this.marker = new mapboxgl.Marker({
          draggable: true,
        }).setLngLat(geometry.lngLat).addTo(this.map)
      } else {
        this.marker.setLngLat(geometry.lngLat)
      }
    }
    this.geometry = geometry
  }

  _onTouched = () => { }

  initMap() {
    mapboxgl.accessToken = 'MAPBOX_ACCESS_TOKEN';

    this.map = new mapboxgl.Map({
      container: this.mapContainer.nativeElement,
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [8, 51.8],
      zoom: 2
    });

    this.map.on('click', e => {
      this._onChange(e)
    });
  }
}

Форма создается с помощью следующей конфигурации:

...

@ViewChild(DynamicFormComponent) form: DynamicFormComponent;

  config: FieldConfig[] = [
    {
      type: 'map',
      label: 'Map one',
      name: 'map-one',
    },
    {
      type: 'input',
      label: 'input one',
      name: 'input-one',
      placeholder: 'Enter your name',
      validation: [Validators.required, Validators.minLength(4)]
    },
    {
      type: 'map',
      label: 'Map two',
      name: 'map-two',
    },
  ];

...

, и результат:

Я могу добавить маркеры, но это не добавляет мои значения геометрии к значениям формы

Answer 1

пользователь marker.getLngLat();чтобы получить маркер lnglat.

var marker = new mapboxgl.Marker({
  draggable: true
}).setLngLat([Coordinates.longitude, Coordinates.latitude])
  .addTo(map);

  //get marker latlong without drag
const lngLat = marker.getLngLat();
console.log(lngLat);

//get marker latlong when you move or drag marker from current position
marker.on('dragend', () => {
  const lngLat = marker.getLngLat();
  console.log(lngLat)
});