Need to access current location of the company


#1

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();

}

}


#2

@OliverPrimo pls help


#3

Oh. Thank you for mentioning me but I’m sorry to tell you that you can’t trust me with this because I have no experience on accessing locations yet. Really sorry. I hope someone can help you with this :slight_smile:


#4

@david_bc hi… can you help me out?