feat(project): added readonly input to the search component

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

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -353,7 +353,10 @@ everything included in `matGoogleMapsAutocomplete` + the following
 | streetNameLabel     | `Input()`   |  string;      | `Street` |  input label
 | streetNumberLabel   | `Input()`   |  string;      | `Nr.` |  input label
 | postalCodeLabel     | `Input()`   |  string;      | `PLZ` |  input label
+| vicinityLabel       | `Input()`   |  string;      | `Locality` |  input label
 | localityLabel       | `Input()`   |  string;      | `Locality` |  input label
+| showVicinity       | `Input()`   |  boolean;      | `false` |  input label - whether to display the vecinity
+| readonly             | `Input()`   |  boolean;      | `false` |  readonly input
 | country             | `Input()`   | string | string[];          | - | can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by up to 5 countries. Countries must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code. Multiple countries must be passed as a list of country codes.  
 | placeIdOnly         | `Input()`   | boolean                     | - | can be used to instruct the Autocomplete widget to retrieve only Place IDs. On calling getPlace() on the Autocomplete object, the PlaceResult made available will only have the place id, types and name properties set. You can use the returned place ID with calls to the Places, Geocoding, Directions or Distance Matrix services.
 | strictBounds        | `Input()`   | boolean                     | - | is a boolean specifying whether the API must return only those places that are strictly within the region defined by the given bounds. The API does not return results outside this region even if they match the user input.

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
@@ -21,9 +21,12 @@
 
   <form [formGroup]="addressFormGroup" fxFlex fxLayoutGap="10px">
     <div fxLayout="row" fxLayoutGap="10px">
-      <mat-form-field fxFlex="80" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
+      <mat-form-field fxFlex="80"
+                      [appearance]="appearance"
+                      [@animate]="{ value: '*', params: { y: '100%' } }">
         <mat-label>{{streetNameLabel}}</mat-label>
         <input
+          [readonly]="readonly"
           formControlName="streetName"
           matInput
           required
@@ -34,6 +37,7 @@
       <mat-form-field fxFlex="20" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
         <mat-label>{{streetNumberLabel}}</mat-label>
         <input
+          [readonly]="readonly"
           formControlName="streetNumber"
           matInput
           required
@@ -46,17 +50,20 @@
       <mat-form-field fxFlex="20" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
         <mat-label>{{postalCodeLabel}}</mat-label>
         <input
+          [readonly]="readonly"
           formControlName="postalCode"
           matInput
           required
         />
         <!--        <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"
+      <mat-form-field *ngIf="showVicinity" fxFlex="auto"
+                      [appearance]="appearance"
                       [@animate]="{ value: '*', params: { y: '100%' } }">
         <mat-label>{{vicinityLabel}}</mat-label>
         <input
+          [readonly]="readonly"
           matInput
           formControlName="vicinity"
         />
@@ -65,6 +72,7 @@
         <mat-form-field fxFlex="auto" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
           <mat-label>{{localityLabel}}</mat-label>
           <input
+            [readonly]="readonly"
             formControlName="long"
             matInput
             required

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
@@ -54,6 +54,12 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
   @Input()
   type?: string;
 
+  @Input()
+  readonly: boolean;
+
+  @Input()
+  disableSearch: boolean;
+
   @Output()
   onGermanAddressMapped: EventEmitter<GermanAddress> = new EventEmitter<GermanAddress>();
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -557,6 +557,7 @@ <h2>Usage</h2>
       <mat-search-google-maps-autocomplete appearance="outline"
                                            country="de"
                                            [showVicinity]="true"
+                                           [readonly]="true"
                                            (onGermanAddressMapped)="onGermanAddressMapped($event)">
       </mat-search-google-maps-autocomplete>
     </mat-card-content>