I am currently utilizing reactive forms from Angular Material and encountering an issue. Despite successfully capturing the input value upon submission through console.log, I am facing errors when attempting to store this value in a variable named "address" within the onSubmit method.
Various attempts have been made to resolve this, including:
- var address=this.geocodingForm.get('input').value
- var address=this.geocodingForm.value.input
Additionally, trying to switch 'var' to 'let' was also explored.
geocoding.component.html
<mat-grid-tile colspan='60'>
<div #gmap class="map"></div>
</mat-grid-tile>
<mat-grid-tile colspan='40'>
<form novalidate [formGroup]="geocodingForm" #gform="ngForm" (ngSubmit)="onSubmit()">
<h4>Geocoding Service</h4>
<p>
<input matInput formControlName="input" placeholder="address" type="text" required>
<mat-error *ngIf="formErrors.input">{{formErrors.input}}</mat-error>
</p>
<button type="submit" mat-button class="background-primary text-floral-white" [disabled]="gform.form.invalid">Submit</button>
</form>
</mat-grid-tile>
</mat-grid-list>
geocoding.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-geocoding',
templateUrl: './geocoding.component.html',
styleUrls: ['./geocoding.component.css']
})
export class GeocodingComponent implements OnInit {
geocodingForm: FormGroup;
map: google.maps.Map;
errMess: string;
mapProp = {};
@ViewChild('gform', { static: false }) geocodingFormDirective;
@ViewChild('gmap') gmapElement: any;
constructor(private fb: FormBuilder) {
this.createForm();
}
ngOnInit() {
this.mapProp = {
center: new google.maps.LatLng(18.5793, 73.8143),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, this.mapProp);
}
formErrors = {
'input': ''
};
validationMessages = {
'input': {
'required': 'Please provide an address'
}
};
createForm() {
this.geocodingForm = this.fb.group({
input: ['', [Validators.required]]
});
this.geocodingForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged();
}
onValueChanged(data?: any) {
if (!this.geocodingForm) { return; }
const form = this.geocodingForm;
for (const field in this.formErrors) {
if (this.formErrors.hasOwnProperty(field)) {
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
if (control.errors.hasOwnProperty(key)) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
}
}
onSubmit() {
console.log(this.geocodingForm.value.input);
var geocoder = new google.maps.Geocoder();
geocodeAddress(geocoder, this.mapProp);
function geocodeAddress(geocoder, resultsMap) {
var address=this.geocodingForm.get('input').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
this.geocodingFormDirective.resetForm();
this.geocodingForm.reset({
input: ''
});
}
}
The main objective is to avoid receiving the error :
Cannot read property 'geocodingForm' of undefined