fix(lib): improved the reactive forms mechanism

Author: AnthonyNahas

projects/angular-material-extensions/google-maps-autocomplete/src/lib/component/mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component.ts

@@ -102,6 +102,7 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit, Control
   set value(value: GermanAddress) {
     this._value = value;
     this.propagateChange(this.value);
+    console.log('setValue', this._value);
   }
 
   ngOnInit() {
@@ -128,50 +129,55 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit, Control
       .pipe(distinctUntilChanged(), debounceTime(400), takeUntil(this._unsubscribeAll))
       .subscribe(streetName => {
         console.log('custom input for street Name', streetName);
-        console.log('custom input - new german address', this.value);
+        console.log('custom input - new german address streetName', this.value);
         !this.value ? this.value = {streetName} : this.value.streetName = streetName;
         this.value.displayAddress = this.parseDisplayAddress();
+        this.propagateChange(this.value);
       });
     this.addressFormGroup
       .get('streetNumber')
       .valueChanges
       .pipe(distinctUntilChanged(), debounceTime(400), takeUntil(this._unsubscribeAll))
       .subscribe(streetNumber => {
         !this.value ? this.value = {streetNumber} : this.value.streetNumber = streetNumber;
-        console.log('custom input - new german address', this.value);
+        console.log('custom input - new german address streetNumber', this.value);
         this.value.displayAddress = this.parseDisplayAddress();
+        this.propagateChange(this.value);
       });
     this.addressFormGroup
       .get('postalCode')
       .valueChanges
       .pipe(distinctUntilChanged(), debounceTime(400), takeUntil(this._unsubscribeAll))
       .subscribe(postalCode => {
         !this.value ? this.value = {postalCode} : this.value.postalCode = postalCode;
-        console.log('custom input - new german address', this.value);
+        console.log('custom input - new german address postalCode', this.value);
         this.value.displayAddress = this.parseDisplayAddress();
+        this.propagateChange(this.value);
       });
     this.addressFormGroup
       .get('vicinity')
       .valueChanges
       .pipe(distinctUntilChanged(), debounceTime(400), takeUntil(this._unsubscribeAll))
       .subscribe(vicinity => {
         !this.value ? this.value = {vicinity} : this.value.vicinity = vicinity;
-        console.log('custom input - new german address', this.value);
+        console.log('custom input - new german address vicinity', this.value);
         this.value.displayAddress = this.parseDisplayAddress();
+        this.propagateChange(this.value);
       });
     this.addressFormGroup
       .get('locality')
       .valueChanges
       .pipe(distinctUntilChanged(), debounceTime(400), takeUntil(this._unsubscribeAll))
       .subscribe(locality => {
         !this.value ? this.value = {locality} : this.value.locality = locality;
-        console.log('custom input - new german address', this.value);
+        console.log('custom input - new german address locality', this.value);
         this.value.displayAddress = this.parseDisplayAddress();
+        this.propagateChange(this.value);
       });
   }
 
   parseDisplayAddress() {
-    return `${this.value?.streetName} ${this.value?.streetNumber}, ${this.value?.postalCode} ${this.value?.locality?.long}`
+    return `${this.value?.streetName ? this.value?.streetName : ''} ${this.value?.streetNumber ? this.value?.streetNumber : ''}${this.value?.postalCode || this.value?.locality?.long ? ', ' : ''}${this.value?.postalCode ? this.value?.postalCode : ''} ${this.value?.locality?.long ? this.value?.locality?.long : ''}`
   }
 
   syncAutoComplete($event: google.maps.places.PlaceResult) {