I have a page that contains company details. In which there is a field which fetches current location.
When clicking the icon i need to access the location and set it in the input box.
I had tried geo location but some error pulled up.
here is my page design and ts file.
html: there is a field called location with an icon.
<ion-header>
<ion-navbar>
<ion-title>DEDICATED ENTITY REGISTRATION</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!-- <ion-row no padding>
<ion-col> -->
<ion-item class="sel">
<ion-label>Select Center <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">NES</ion-option>
<ion-option value="n64">Nintendo64</ion-option>
<ion-option value="ps">PlayStation</ion-option>
</ion-select>
</ion-item>
<!-- </ion-col>
<ion-col> -->
<ion-item class="sel">
<ion-label>Location <span class="required">*</span></ion-label>
<ion-input type="text"></ion-input>
<ion-icon class="cursor" name="pin" item-end (click)="loc()"></ion-icon>
</ion-item>
<!-- </ion-col>
</ion-row> -->
<form [formGroup]="formded">
<ion-item>
<ion-label stacked>Name <span class="required">*</span></ion-label>
<ion-input formControlName="name" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Address 1 <span class="required">*</span></ion-label>
<ion-input formControlName="add1" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Address 2 <span class="required">*</span></ion-label>
<ion-input formControlName="add2" type="text"></ion-input>
</ion-item>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>Zipcode <span class="required">*</span></ion-label>
<ion-input formControlName="zip" type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label floating>District <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">Trivandrum</ion-option>
<ion-option value="n64">Ernakulam</ion-option>
<ion-option value="ps">Thrissur</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>State <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">Kerala</ion-option>
<ion-option value="n64">Tamil Nadu</ion-option>
<ion-option value="ps">Karnataka</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label floating>Country <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">India</ion-option>
<ion-option value="n64">China</ion-option>
<ion-option value="ps">USA</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-item>
<ion-label class="add">Address Proof: <span class="required">*</span></ion-label>
<ion-icon name="document" item-end></ion-icon>
</ion-item>
<ion-label class="h">Applicant Details :</ion-label>
<ion-item>
<ion-label stacked>Name <span class="required">*</span></ion-label>
<ion-input formControlName="appName" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Address 1 <span class="required">*</span></ion-label>
<ion-input formControlName="appAdd1" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Address 2 <span class="required">*</span></ion-label>
<ion-input formControlName="appAdd2"type="text"></ion-input>
</ion-item>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>Zipcode <span class="required">*</span></ion-label>
<ion-input formControlName="appZip"type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label floating>District <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">Trivandrum</ion-option>
<ion-option value="n64">Ernakulam</ion-option>
<ion-option value="ps">Thrissur</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>State <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">Kerala</ion-option>
<ion-option value="n64">Tamil Nadu</ion-option>
<ion-option value="ps">Karnataka</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label floating>Country <span class="required">*</span></ion-label>
<ion-select interface="popover">
<ion-option value="nes">India</ion-option>
<ion-option value="n64">China</ion-option>
<ion-option value="ps">USA</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-item>
<ion-label class="add">Address Proof: <span class="required">*</span></ion-label>
<ion-icon name="document" item-end></ion-icon>
</ion-item>
<ion-item>
<ion-label floating>Mobile <span class="required">*</span></ion-label>
<ion-input formControlName="mob" type="text"></ion-input>
</ion-item>
<ion-row>
<ion-col>
<button color="light" block>Sent OTP</button>
</ion-col>
<ion-col>
<ion-item>
<ion-label fixed>OTP <span class="required">*</span></ion-label>
<ion-input formControlName="otp" type="text"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</form>
<!-- <ion-item> -->
<ion-row>
<ion-col>
<ion-label class="a">Felicitation Details :<span class="required">*</span></ion-label>
</ion-col>
<ion-col>
<ion-label stacked class="txt">includes capacity, connectivity and accessibility details</ion-label>
</ion-col>
</ion-row>
<ion-textarea name="comment" placeholder="Put any comment..."></ion-textarea>
<!-- </ion-item> -->
</ion-content>
<ion-footer no-shadow class="foot">
<ion-toolbar position="bottom">
<ion-row>
<ion-col>
<button ion-button full color="primary" block>Save</button>
</ion-col>
<ion-col>
<button (click)="next()" ion-button full color="primary" block>Next</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
ts file:
import { Component } from ‘@angular/core’;
import { NavController, AlertController, LoadingController, Loading, IonicPage } from ‘ionic-angular’;
import { ObsAuthService } from ‘…/…/services/obs_auth.services’;
import { DedkycPage } from ‘…/dedkyc/dedkyc’;
import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;
import { ToastController } from ‘ionic-angular’;
@Component({
selector: ‘page-dedreg’,
templateUrl: ‘dedreg.html’,
providers: [ObsAuthService]
})
export class DedregPage {
formded: FormGroup;
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public formBuilder: FormBuilder, public toastCtrl: ToastController) {
this.formded = formBuilder.group({
name: ['', Validators.compose([Validators.pattern('[a-zA-Z ]*'), Validators.required])],
add1: ['', Validators.compose([Validators.required])],
add2: ['', Validators.compose([Validators.required])],
zip: ['', Validators.compose([Validators.pattern('^[+0-9]{6}$'), Validators.required])],
appName: ['', Validators.compose([Validators.pattern('[a-zA-Z ]*'), Validators.required])],
appAdd1: ['', Validators.compose([Validators.required])],
appAdd2: ['', Validators.compose([Validators.required])],
appZip: ['', Validators.compose([Validators.pattern('^[+0-9]{6}$'), Validators.required])],
mob: ['', Validators.compose([Validators.pattern('^((\\+91-?)|0)?[0-9]{10}$'), Validators.required])],
otp: ['', Validators.compose([Validators.pattern('^[0-9]{4}$'), Validators.required])]
});
}
selectChange(e) {
console.log(e);
}
// goback() {
// this.nav.pop(); // remember to put this to add the back button behavior
// }
public next() {
if (!this.formded.valid) {
const toast = this.toastCtrl.create({
message: 'Fill the inputs in valida format',
duration: 3000
});
toast.present();
}
else {
const toast = this.toastCtrl.create({
message: 'Registration Successfull',
duration: 1000
});
toast.present();
this.nav.push(DedkycPage);
}
}
public loc() {
const toast = this.toastCtrl.create({
message: 'click',
duration: 4000
});
toast.present();
}
}