Auto fill the above input details

Ionic Framework
1

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

}
2

@OliverPrimo I know I am troubling you, but please do help me on this too. I know it is bit long, but please help me out.

3

Maybe you could try this out:

HTML

<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 [(ngModel)]="permanentZipcode" formControlName="zip" type="text"></ion-input>
        </ion-item>
    </ion-col>
    <ion-col>
        <ion-item>
            <ion-label floating>District</ion-label>
            <ion-select [(ngModel)]="permanentDistrict" 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 [(ngModel)]="permanentState" 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 [(ngModel)]="permanentCountry" 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" [(ngModel)]="sameAddress" [checked]="sameAddress" (ionChange)="onSameAddressChange()"></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 [(ngModel)]="communicationZipcode" formControlName="zip2" type="text"></ion-input>
        </ion-item>
    </ion-col>
    <ion-col>
        <ion-item>
            <ion-label floating>District</ion-label>
            <ion-select [(ngModel)]="communicationDistrict" 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 [(ngModel)]="communicationState" 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 [(ngModel)]="communicationCountry" 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>

I just added [(ngModel}] to each element.

TS

// Declare the following models.
public sameAddress: boolean = false;
public permanentZipcode: string = '';
public permanentDistrict: string = '';
public permanentState: string = '';
public permanentCountry: string = '';
public communicationZipcode: string = '';
public communicationDistrict: string = '';
public communicationState: string = '';
public communicationCountry: string = '';

//Add this function to your class.
onSameAddressChange() {
    this.communicationZipcode = '';
    this.communicationDistrict = '';
    this.communicationState = '';
    this.communicationCountry = '';

    if (this.sameAddress) {
        this.communicationZipcode = this.permanentZipcode;
        this.communicationDistrict = this.permanentDistrict;
        this.communicationState = this.permanentState;
        this.communicationCountry = this.permanentCountry;
    }
}

Hope it will solve your problem :blush:

4

ITs showing error like this:

ngModel cannot be used to register form controls with a parent formGroup directive.

5

@aseelali23, I’m sorry I haven’t tried using formGroup. But if you don’t mind changing your codes by removing formGroup and formControlName, maybe it will work.

6

ok. But I have used formcontrol for validation. Tell me a way to use ngmodel for validation. That will be helpfull

7

If you require all those fields you can do that on the typescript like:

      if (!this.communicationZipcode || this.communicationZipcode.length == 0) {
        //do error validations
      }

but if you’re really used to using formGroup, I suggest that you just stick with that and find a solution that fits your code first before applying any drastic changes. Thanks :blush: