Initialisation d'une fonction après l'affichage d'une div

**angie13003** · 24/05/2021, 18h05

Bonjour,

Je suis en train de créer une formulaire avec un affichage dynamique. Le problème est que quand "j'active" cette affichage dynamique avec les *ngIf sur les div en question, autocompletation des adresses avec google map ne fonctionne plus et l'erreur 'InvalidValueError: not an instance of HTMLInputElement' apparait.

voici le code de mon booking.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
import { Component, OnInit, NgZone } from '@angular/core';
import { BookingService } from 'src/app/services/booking.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { PartnerService } from 'src/app/services/partner.service';
import { Booking } from 'src/app/models/booking.model';
import {  } from 'rxjs/add/operator/toPromise';
 
 
@Component({
  selector: 'app-booking-forms',
  templateUrl: './booking-forms.component.html',
  styleUrls: ['./booking-forms.component.css']
})
export class BookingFormsComponent implements OnInit {
 
  bookingForm: FormGroup;
  bookings: Booking[];
  bookingSubscription: Subscription;
  formulaBooking: string;
  distanceForth: string;
  durationForth: any;
  distanceBack: string;
  durationBack: any;
  addressPartner = JSON.parse(localStorage.getItem('addressPartner'));
  addressForth: string;
  addressBack: string;
 
  constructor(private bookingService: BookingService, private router: Router, private formBuilder: FormBuilder, private partnerService: PartnerService, private ngZone: NgZone) { }
 
  ngOnInit(): void {
    this.bookingSubscription = this.bookingService.bookingSubject.subscribe(
      (bookings: Booking[]) => {
        this.bookings = bookings;
      }
    );
    this.initAutocomplete();
    this.bookingService.emitBookingSubject();
    this.initFormBooking();
  }
 
  changeFormulaBooking(e) {
    console.log(e.target.value);
  }
 
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressForth') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.addressForth = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        this.bookingForm.patchValue({
          addressForth : this.addressForth,
          addressBack: ""
        });
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
    let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('addressBack') as HTMLInputElement);
    autocomplete1.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place1: google.maps.places.PlaceResult = autocomplete1.getPlace();
        this.addressBack = place1.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        this.bookingForm.patchValue({
          addressForth : this.addressForth || "",
          addressBack: this.addressBack
        });
        //verify result
        if (place1.geometry === undefined || place1.geometry === null) {
          return;
        }
      });
    });
  }

voici le code de mon booking.component.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<div class="row mt-5 mb-5">
  <div class="col-12 text-center">
      <h2>Prendre un rendez-vous</h2>
  </div>
</div>
 
<div class="row">
  <form class="col-10 offset-1" [formGroup]="bookingForm" (ngSubmit)="onSubmitFormBooking()">
    <div class="row">
      <div class="col-6">
        <h3 class="text-center mb-4">Choix de la formule</h3>
      </div>
    </div>
    <div class="row d-flex">
      <div class="mb-3 col-6">
        <div class="row input-field d-flex flex-row mb-2">
          <div class="input-field d-flex mt-radio flex-colunm col-7">
                  <p class="d-flex flex-row">
                    <input name="formulaBooking" type="radio" value="simple" class="validate m-auto" id="simple" formControlName="formulaBooking" (change)="changeFormulaBooking($event)">
                    <label for="formulaBooking">Trajet simple</label>
                  </p>
          </div>
          <div class="input-field d-flex mt-radio flex-colunm col-5">
                  <p class="d-flex flex-row">
                    <input name="formulaBooking" type="radio" value="round" class="validate m-auto" id="round" formControlName="formulaBooking" (change)="changeFormulaBooking($event)">
                    <label for="formulaBooking">Aller/Retour</label>
                  </p>
          </div>
        </div>
        <div class="row input-field d-flex flex-row mb-2" *ngIf="this.bookingForm.value.formulaBooking === 'simple' || this.bookingForm.value.formulaBooking === 'forth' || this.bookingForm.value.formulaBooking === 'back' ">
          <div class="input-field d-flex mt-radio flex-colunm">
            <label class="col-4 mr-0" for="formulaBooking">Type de trajet</label>
            <select class="validate col-8" id="formulaBooking" formControlName="formulaBooking" required>
              <option value="Selectionnez un type de trajet" disabled selected>Sélectionnez un type de trajet</option>
              <option value="forth" (change)="changeFormulaBooking($event)">Prise en charge</option>
              <option value="back" (change)="changeFormulaBooking($event)">Restitution</option>
            </select>
          </div>
        </div>
      </div>
      <div class="mb-3 col-6" *ngIf="this.bookingForm.value.formulaBooking === 'forth'">
        <div class="input-field d-flex flex-row mb-70">
          <div class="input-field col-12">
            <label for="addressForth">Adresse de prise en charge</label>
            <input type="text" class="validate" id="addressForth" formControlName="addressForth">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
      </div>
      <div class="mb-3 col-6" *ngIf="this.bookingForm.value.formulaBooking === 'back'">
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-12">
            <label for="addressBack">Adresse de restitution</label>
            <input type="text" class="validate" id="addressBack" formControlName="addressBack">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
      </div>
      <div class="mb-3 col-6" *ngIf="this.bookingForm.value.formulaBooking === 'round'">
        <div class="input-field d-flex flex-row mb-70">
          <div class="input-field col-12">
            <label for="addressForth">Adresse de prise en charge</label>
            <input type="text" class="validate" id="addressForth" formControlName="addressForth">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-12">
            <label for="addressBack">Adresse de restitution</label>
            <input type="text" class="validate" id="addressBack" formControlName="addressBack">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
      </div>
    </div>

Je pense que cela vient de l'initialisation de la fonction initAutocomplete qui est pas faite au bon moment. J'essayé de mettre cette fonction dans la fonction changeFormulaBooking() mais cela n'a pas fonctionné.
J'essaye avec les fonctio ngDoCheck(), ngAfterContentInit(), ngAfterContentChecked(). Cela ne fonctionne toujours pas. Je ne suis plus quoi faire.

**krakatoa** · 24/05/2021, 18h15

ça donne quoi dans le google map, avant de faire le patchValue !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
console.log(this.bookingForm);

**angie13003** · 24/05/2021, 18h22

Lorsque que je test ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressForth') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.addressForth = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        console.log(this.bookingForm);
        this.bookingForm.patchValue({
          addressForth : this.addressForth,
          addressBack: ""
        });
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
    let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('addressBack') as HTMLInputElement);
    autocomplete1.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place1: google.maps.places.PlaceResult = autocomplete1.getPlace();
        this.addressBack = place1.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        console.log(this.bookingForm);
        this.bookingForm.patchValue({
          addressForth : this.addressForth || "",
          addressBack: this.addressBack
        });
        //verify result
        if (place1.geometry === undefined || place1.geometry === null) {
          return;
        }
      });
    });
  }

dans ma console je n'ai absolument rien. Même pas de underfine.

Donc si je comprend bien c'est qu'il ne rentre pas dans la fonction ?
Comment y remédier ?

**krakatoa** · 24/05/2021, 18h24

ça donne quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
  initAutocomplete() {
console.log("0000000");
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressForth') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
console.log("11111111111111");
      this.ngZone.run(() => {
console.log("2222222222222222");
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.addressForth = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        console.log(this.bookingForm);
        this.bookingForm.patchValue({
          addressForth : this.addressForth,
          addressBack: ""
        });
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });

**angie13003** · 24/05/2021, 18h27

toujours rien dans ma console

**krakatoa** · 24/05/2021, 18h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  ngOnInit(): void {

console.log("ngOnInit ---------");                 //   ça s'affiche ?

    this.bookingSubscription = this.bookingService.bookingSubject.subscribe(
      (bookings: Booking[]) => {
        this.bookings = bookings;
      }
    );
    this.initAutocomplete();                       // est appellé ici !

il est appelé dans le ngOnInit
on devrait avoir au moins 0000000000

c'est impossible !

Initialisation d'une fonction après l'affichage d'une div

Angular

Vue hybride

Discussions similaires

Partager

Partager