feat(project): add vicinity as option

angular-material-extensions · Jan 3, 2020 · 898c17a · 898c17a
1 parent 3a96f05
commit 898c17a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/...nt/mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component.html b/...nt/mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component.html
@@ -53,6 +53,14 @@
         <!--        <mat-icon color="primary" matSuffix>add_location</mat-icon>-->
         <!--    <mat-error>{{ 'msa.contactData.currentAddress.error' | translate }}</mat-error>-->
       </mat-form-field>
+      <mat-form-field *ngIf="showVicinity" fxFlex="auto" [appearance]="appearance"
+                      [@animate]="{ value: '*', params: { y: '100%' } }">
+        <mat-label>{{vicinityLabel}}</mat-label>
+        <input
+          matInput
+          formControlName="vicinity"
+        />
+      </mat-form-field>
       <div formGroupName="locality" fxFlex="auto">
         <mat-form-field fxFlex="auto" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
           <mat-label>{{localityLabel}}</mat-label>

diff --git a/...nent/mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component.ts b/...nent/mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component.ts
@@ -32,6 +32,12 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
   @Input()
   localityLabel = 'Locality';
 
+  @Input()
+  vicinityLabel = 'Vicinity';
+
+  @Input()
+  showVicinity: boolean;
+
   @Input()
   country: string | string[];
 
@@ -67,6 +73,7 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
       streetName: [null, Validators.required],
       streetNumber: [null, Validators.required],
       postalCode: [null, Validators.required],
+      vicinity: [null],
       locality: this.formBuilder.group({
         long: [null, Validators.required],
       }),
@@ -79,7 +86,9 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
     }
     const germanAddress: GermanAddress = parseGermanAddress($event);
     this.germanAddress = germanAddress;
-    console.log('syncAutoComplete', $event, 'after parsing', germanAddress);
+    if (germanAddress.vicinity) {
+      this.addressFormGroup.get('vicinity').patchValue(germanAddress.vicinity);
+    }
     if (germanAddress.streetName) {
       this.addressFormGroup.get('streetName').patchValue(germanAddress.streetName);
     }
@@ -94,8 +103,6 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
     }
 
     this.onGermanAddressMapped.emit(germanAddress);
-
-    console.log('address', this.addressFormGroup.getRawValue());
   }
 
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -556,6 +556,7 @@ <h2>Usage</h2>
     <mat-card-content>
       <mat-search-google-maps-autocomplete appearance="outline"
                                            country="de"
+                                           [showVicinity]="true"
                                            (onGermanAddressMapped)="onGermanAddressMapped($event)">
       </mat-search-google-maps-autocomplete>
     </mat-card-content>