How save leaflet coordinates in a angular form?

Question

I am currently working on a project using angular, mongodb nodejs and leaflet. The project form uses reverse geocoding with leaflet to get the coordinates that the user marks, the coordinates must be entered in the input indicated automatically (up to here it works). The problem is that when I submit the form to be saved in the mongo database, the fields where the coordinates should be stored are empty(the other data in the form is saved but the coordinate fields are not). I think the problem is linked to ngModel because if I enter the coordinates manually (by typing them), the coordinates can be saved.

I am sincerely in this and I have little knowledge (i'm starting on this), I have been with this problem for several days without being able to solve it. I wish someone could help me I would really appreciate it. ty

HTML-

<input  id="lat" name="latitude" #latitude="ngModel"[(ngModel)]="publication.latitude" />            


<input id="lon"  name="longitude"  #longitude="ngModel" [(ngModel)]="publication.longitude" />


<input type="submit" value="Enviar" [disabled]="!newPubForm.form.valid"/>

TS-



    const map = new L.Map('map', { 'center': [51.441767, 5.480247], 'zoom': 12,});


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'}).addTo(map);

        var marker = L.marker([51.441767, 5.470247],  {draggable: true
          }).addTo(map);


        marker.on('dragend', function (e) {
            (document.getElementById('lat') as HTMLInputElement).value = marker.getLatLng().lat;
            (document.getElementById('lon') as HTMLInputElement).value = marker.getLatLng().lng;

             });

onSubmit(form){

        this._publicationService.addPublication(this.token, 
        this.publication).subscribe(
            response => {
                if(response.publication){
                    //this.publication = response.publication;

                    if(this.filesToUpload && this.filesToUpload.length){
                        //Subir Imagen
                               this._uploadService.makeFileRequest(this.url+'upload-image-pub/'+response.publication._id, [], this.filesToUpload, this.token, 'image')
                               .then((result:any) =>{
                               this.publication.file = result.image;
                               this.status = 'success';
                               form.reset();
                    });    

                }else{
                               this.status = 'success';
                               form.reset();
                }


                }else{
                    this.status = 'error';

                }

            },
            error => {
                var errorMessage = error;
                console.log(errorMessage);
                if(errorMessage != null){
                    this.status = 'error';

                }

            }
        );
    }

How do you set the value? Show that code, also show the submit function — AT82, Aug 21 '19 at 12:39
@AJT_82 add submit function code but what do you mean with set the value? to these lines? " (document.getElementById('lat') as HTMLInputElement).value = marker.getLatLng().lat; " I appreciate your interest — ivan, Aug 21 '19 at 17:36

score 1 · Accepted Answer · answered Aug 21 '19 at 17:45

Manipulating the DOM should be the last resort in Angular. It can cause issues just like this, angular will not be in sync with something like:

(document.getElementById('lat') as HTMLInputElement).value = marker.getLatLng().lat;

Angular usually has all kinds of tools to do things the "correct" way, and not manipulate the DOM. So instead of setting the value to the html element, set the value to your [(ngModel)].

Also I suggest you take a habit of using arrow syntax instead of function, to preserve the context of this.

So change your assignment to:

marker.on('dragend', () => {
  this.publication.latitude = marker.getLatLng().lat;
  this.publication.longitude = marker.getLatLng().lng;
});

omg this works ... I really appreciate it a lot, I have been stopped by this this error several days hahahha Thank you — ivan, Aug 21 '19 at 18:23

How save leaflet coordinates in a angular form?

1 Answers1