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

Version imprimable

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:

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:

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.

24/05/2021, 18h15
krakatoa
ça donne quoi dans le google map, avant de faire le patchValue !
Code:

1 2 console.log(this.bookingForm);

Lorsque que je test ce code

Code:

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 ?

ça donne quoi ?

Code:

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;
        }
      });
    });

24/05/2021, 18h27
angie13003

toujours rien dans ma console

Code:

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 !

24/05/2021, 18h36
angie13003

alors c'est trop bizarre car en mettant le console.log("ngOnInit"); le console.log(00000000); s'est affiché.
peut être un beug de mon navigateur. Car j'ai enlever le console.log("ngOnInit"); et le console.log(00000) apparait bien.

Donc apparemment, il rentre dans la function mais ne rentre pas dans la variable let autocomplete.
24/05/2021, 18h39
krakatoa

tu utilises @angular/google-maps ?

https://timdeschryver.dev/blog/googl...ular-component
24/05/2021, 18h42
angie13003

oui j'utilise ça mais le truc c'est que si j'enleve les *ngIf sur les div qui font apparaitre les input address cela fonctionne parfaitement. C'est quand je rajoute les condition sur les div et donc que les input address sont "caché" au mmoment de l'initialisation du component que cela ne fonctionne pas.
24/05/2021, 18h49
krakatoa

pourtant je vois : "getElementById" dans ton code et ça c'est du javaScript.
tu utilises la librairie map de google, la version javascript classique qu'on utilise sur un page html classique.
dommage de ne pas profiter de typeScript !

sinon, au moment que tu mets ta condition à true, tu fais appelle à this.initAutocomplete
pas la peine de l'initialiser avant

c'est à dire je dois y faire appel dans le html ou dans le typescript ?

Code:

1
2
3
4
5
6
7
8
9
10
11
      <div class="mb-3 col-6" *ngIf="this.bookingForm.value.formulaBooking === 'forth'">. // je dois faire appel à ma fonction ici ? 
        <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>

Code:

1
2
3
4
5
6
7
8
9
10
11
  ngOnInit(): void {
    this.bookingSubscription = this.bookingService.bookingSubject.subscribe(
      (bookings: Booking[]) => {
        this.bookings = bookings;
    this.initAutocomplete();
      }
    );

    this.bookingService.emitBookingSubject();
    this.initFormBooking();

24/05/2021, 19h06
angie13003

j'avais déjà essayer cette solution et cela ne fonctionne pas. :(:(

j'ai également essayer

Code:

<div class="mb-3 col-6" *ngIf="this.bookingForm.value.formulaBooking === 'forth'" (change)="this.initAutocomplete()">

et ca marche pas non plus

j'ai trouvé la solution au final je l'ai fait avec des ngClass
Code:

1 2 <div class="mb-3 col-6" [ngClass]="{'d-none': this.bookingForm.value.formulaBooking != 'forth'}">