Auto fill the above input details

February 10, 2019, 11:29 pm

≫ Next: How to fetch details from previous page to payment page?

I have certain input fields like address zip code etc… And below I have same fields but as heading communication address and above that i have a check box as same as above. So when I tick that checkbox i need to autofill the above content beow here. I need also the combobox items too. Pls help.
here is my code:
html:

<ion-header>

    <ion-navbar>
        <ion-title>INDIVIDUAL REGISTRATION</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <form [formGroup]="formind">


        <ion-item>
            <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-option value="genesis">Sega Genesis</ion-option>
                <ion-option value="saturn">Sega Saturn</ion-option>
                <ion-option value="snes">SNES</ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <ion-label>DOB <span class="required">*</span></ion-label>
            <ion-datetime displayFormat="MMM DD YYYY"></ion-datetime>
        </ion-item>

        <ion-list radio-group name="gender" id="gender">
            <ion-list-header>Gender</ion-list-header>
            <ion-row>
                <ion-col>
                    <ion-item>
                        <ion-label>Male</ion-label>
                        <ion-radio value="male"></ion-radio>
                    </ion-item>
                </ion-col>
                <ion-col>
                    <ion-item>
                        <ion-label>Female</ion-label>
                        <ion-radio value="female"></ion-radio>
                    </ion-item>
                </ion-col>
            </ion-row>
        </ion-list>

        <ion-label class="add">Permanent Address : <span class="required">*</span></ion-label>

        <ion-item>
            <ion-label stacked>Address 1</ion-label>
            <ion-input formControlName="add1" type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Address 2</ion-label>
            <ion-input formControlName="add2" type="text"></ion-input>
        </ion-item>
        <ion-row>
            <ion-col>
                <ion-item>
                    <ion-label floating>Zipcode</ion-label>
                    <ion-input formControlName="zip" type="text"></ion-input>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item>
                    <ion-label floating>District</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</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</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="add">Communication Address : <span class="required">*</span></ion-label>
        <ion-item>
            <ion-label>Same as permanent address</ion-label>
            <ion-checkbox color="dark" checked="false"></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label stacked>Address 1</ion-label>
            <ion-input formControlName="addcomm1" type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Address 2</ion-label>
            <ion-input formControlName="addcomm2" type="text"></ion-input>
        </ion-item>
        <ion-row>
            <ion-col>
                <ion-item>
                    <ion-label floating>Zipcode</ion-label>
                    <ion-input formControlName="zip2" type="text"></ion-input>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item>
                    <ion-label floating>District</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</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</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 class="otp" 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-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 { ConnectrgPage } from '../connectrg/connectrg';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IndkycPage } from '../indkyc/indkyc';
import { ToastController } from 'ionic-angular';
import { ConnecthomePage } from '../connecthome/connecthome';
// import { FileChooser } from '@ionic-native/file-chooser';

@Component({
    
    selector: 'page-individualreg',
    templateUrl: 'individualreg.html',
    providers: [ObsAuthService]


})
export class IndividualregPage {
    formind: FormGroup;

    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        private builder: FormBuilder,public toastCtrl:ToastController) { 
            this.formind = builder.group({    
                add1: ['',Validators.compose([Validators.required])],
                add2: ['', Validators.compose([Validators.required])],
                zip:['',Validators.compose([Validators.pattern('^[+0-9]{6}$'),Validators.required])],
                addcomm1: ['',Validators.compose([Validators.required])],
                addcomm2: ['', Validators.compose([Validators.required])],
                zip2:['',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])]
            });
        }
// uploadresume(){
//         this.fileChooser.open()
//         .then(uri => console.log(uri))
//         .catch(e => console.log(e));
// }
    selectChange(e) {
        console.log(e);
    }
    goback() {
        

        this.nav.pop();  // remember to put this to add the back button behavior
    }
    // public rg(){
    //     this.nav.push(ConnectrgPage);
    // }

    public event = {
        month: ' - - '
    }
   
    public next() {

        if(!this.formind.valid){
            const toast = this.toastCtrl.create({
                message: 'Fill the inputs in valida format',
                duration: 2000
              });
              toast.present();
        }
        else{

            const toast = this.toastCtrl.create({
                message: 'Registered',
                duration: 1000
              });
              toast.present();
              this.nav.push(IndkycPage);
        
        }
    }

}

Posts: 1

Participants: 1