我有一个永久性的地址,可以在其中输入信息,在此之下,我有一个通讯地址。在这之间,我有一个复选框,其含义与上述相同,因此,当我勾选该复选框时,我在永久地址中提供的所有字段都应自动填写通讯地址输入。我知道代码很大,对不起。
<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);
}
}
}