angular - 我想将上面的内容自动填充到下面的输入字段中

Question

我有提供输入的永久地址，在此之下我有通信地址。在这之间我有一个复选框，它与上面的内容相同，所以当我勾选复选框时，我在永久地址中给出的所有字段都应该自动填写通信地址输入。我知道代码很大，对不起各位。

<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 formContraolName="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-label class="add">Address Proof: <span class="required">*</span> 
    </ion-label>

    <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-label class="add">Address Proof: <span class="required">*</span> 
    </ion-label>
    <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>

      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';


       @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.required])],
                addcomm1: ['',Validators.compose([Validators.required])],
                addcomm2: ['', Validators.compose([Validators.required])],
                zip2:['',Validators.compose([Validators.required])],
                mob:['',Validators.compose([Validators.pattern('^((\\+91-?)|0)? 
         [0-9]{10}$'),Validators.required])],
                otp:['',Validators.compose([Validators.required])]
            });
        }

    selectChange(e) {
        console.log(e);
    }
    goback() {

        this.nav.pop();  // remember to put this to add the back button 
      behavior
    }


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

        }
       }

     }

标签： angularionic2