import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {parseGermanAddress} from '../../helpers/parser';
import {GermanAddress} from '../../interfaces';
import {Appearance} from '../mat-google-maps-autocomplete.component';
import {InputAnimations} from '../../animations';
@Component({
selector: 'mat-search-google-maps-autocomplete',
templateUrl: './mat-search-google-maps-autocomplete.component.html',
styleUrls: ['./mat-search-google-maps-autocomplete.component.scss'],
animations: InputAnimations
})
export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
@Input()
appearance: string | Appearance = Appearance.STANDARD;
@Input()
searchAddressLabel = 'Search Address';
@Input()
streetNameLabel = 'Street';
@Input()
streetNumberLabel = 'Nr.';
@Input()
postalCodeLabel = 'PLZ';
@Input()
localityLabel = 'Locality';
@Input()
country: string | string[];
@Input()
placeIdOnly?: boolean;
@Input()
strictBounds?: boolean;
@Input()
types?: string[];
// types: string[] = ['address'];
@Input()
type?: string;
@Output()
onGermanAddressMapped: EventEmitter<GermanAddress> = new EventEmitter<GermanAddress>();
germanAddress: GermanAddress;
addressFormGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.addressFormGroup = this.createAddressFormGroup();
}
createAddressFormGroup(): FormGroup {
return this.formBuilder.group({
streetName: [null, Validators.required],
streetNumber: [null, Validators.required],
postalCode: [null, Validators.required],
locality: this.formBuilder.group({
long: [null, Validators.required],
}),
});
}
syncAutoComplete($event: google.maps.places.PlaceResult) {
if (this.germanAddress) {
this.addressFormGroup.reset();
}
const germanAddress: GermanAddress = parseGermanAddress($event);
this.germanAddress = germanAddress;
console.log('syncAutoComplete', $event, 'after parsing', germanAddress);
if (germanAddress.streetName) {
this.addressFormGroup.get('streetName').patchValue(germanAddress.streetName);
}
if (germanAddress.streetNumber) {
this.addressFormGroup.get('streetNumber').patchValue(germanAddress.streetNumber);
}
if (germanAddress.postalCode) {
this.addressFormGroup.get('postalCode').patchValue(germanAddress.postalCode);
}
if (germanAddress.locality && germanAddress.locality.long) {
this.addressFormGroup.get('locality.long').patchValue(germanAddress.locality.long);
}
this.onGermanAddressMapped.emit(germanAddress);
console.log('address', this.addressFormGroup.getRawValue());
}
}
<div fxLayout="column">
<div fxFlex="100">
<!--search address-->
<mat-form-field fxFlex="auto" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
<mat-label>{{searchAddressLabel}}</mat-label>
<input
(onAutocompleteSelected)="syncAutoComplete($event)"
[country]="country"
[placeIdOnly]="placeIdOnly"
[strictBounds]="strictBounds"
[types]="types"
[type]="type"
matGoogleMapsAutocomplete
matInput
required
/>
<mat-icon color="primary" matSuffix>search</mat-icon>
<!-- <mat-error>{{ 'msa.contactData.currentAddress.error' | translate }}</mat-error>-->
</mat-form-field>
</div>
<form [formGroup]="addressFormGroup" fxFlex fxLayoutGap="10px">
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field fxFlex="80" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
<mat-label>{{streetNameLabel}}</mat-label>
<input
formControlName="streetName"
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 fxFlex="20" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
<mat-label>{{streetNumberLabel}}</mat-label>
<input
formControlName="streetNumber"
matInput
required
/>
<!-- <mat-icon color="primary" matSuffix>add_location</mat-icon>-->
<!-- <mat-error>{{ 'msa.contactData.currentAddress.error' | translate }}</mat-error>-->
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field fxFlex="20" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
<mat-label>{{postalCodeLabel}}</mat-label>
<input
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>
<div formGroupName="locality" fxFlex="auto">
<mat-form-field fxFlex="auto" [appearance]="appearance" [@animate]="{ value: '*', params: { y: '100%' } }">
<mat-label>{{localityLabel}}</mat-label>
<input
formControlName="long"
matInput
required
/>
<mat-icon color="primary" matSuffix>add_location</mat-icon>
<!-- <mat-error>{{ 'msa.contactData.currentAddress.error' | translate }}</mat-error>-->
</mat-form-field>
</div>
</div>
</form>
</div>