这里我首先填写用户详细信息然后提交，然后otp页面加载。我想在用户输入无效的OTP后重新加载OTP页面，以便他可以在获得后输入OTP。我无法重新加载到同一页面。请通过提供我的代码更改来帮助我。我是Ionic3和Angular4的新手。请让我知道我哪里出错了。
signup.html
<ion-content padding>
<script src="cordova.js"></script>
<script type="text/javascript"></script>
<div class="container1">
<div class="centerLogo"><h1><a href="#"><img src="img/logo.jpg" /></a></h1></div>
<ion-list>
<form #fm = "ngForm" (ngSubmit)="myHome(fm)" [formGroup]="myform" *ngIf="!showpage">
<div *ngIf="!generateOtp">
<ul id="tabs">
<li (click)="showpage=false"><a id="tab2">Registration Form</a></li>
</ul>
<div class="form-group" id="tab2C" >
<ion-item>
<ion-input type="text" formControlName="name" [(ngModel)]="userInfo.name" placeholder="Name" name="name" id="name" spellcheck="false" autocapitalize="off"></ion-input>
</ion-item>
<p *ngIf="!isValid('name')" danger padding-left>Invalid Name</p>
<ion-item>
<ion-input type="email" formControlName="email" [(ngModel)]="userInfo.email" placeholder="Email" name="email" id="email" spellcheck="false" autocapitalize="off"></ion-input>
</ion-item>
<p *ngIf="!isValid('email')" danger padding-left>Invalid Email</p>
<ion-item>
<ion-input type="number" [(ngModel)]="userInfo.mobileNo" formControlName="mobileNo" placeholder="Mobile Number" name="mobileNo" id="mobileNo" pattern="[0-9]*" minlength="10" maxlength="10" #mobileNo></ion-input>
</ion-item>
<p *ngIf="!isValid('mobileNo')" danger padding-left>Invalid mobileNo</p>
<ion-item>
<ion-input type="password" formControlName="pin" [(ngModel)]="userInfo.pin" placeholder="Enter Pin" name="pin" id="pin" spellcheck="false" minlength="4" maxlength="6" autocapitalize="off"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" formControlName="confirmPin"[(ngModel)]="userInfo.confirmPin" placeholder="Confirm Pin" name="confirmPin" id="confirmPin" minlength="4" maxlength="6" spellcheck="false" autocapitalize="off"></ion-input>
</ion-item>
<p *ngIf="myform.hasError('mismatchedpins')" danger padding-left>Pin mismatch</p>
<div class="btnRow">
<button class="loginBtn" id="phoneBtn" ion-button color="footer" type="button" [disabled]="!myform.valid" (click)="generateOtpFrommobileNo(mobileNo._value)" full>Continue</button>
</div>
<p></p>
</div>
</div>
<div *ngIf="generateOtp">
<ul id="tabs">
<li><a id="tab2">Enter OTP</a></li>
</ul>
<div class="form-group" id="tab2C">
<div class="form-group">
<ion-item>
<ion-input type="number" formControlName="otp" placeholder="Enter OTP" name="otp" id="otp" minlength="6" maxlength="6"></ion-input>
</ion-item>
<div class="btnRow">
<button class="loginBtn" id="phoneBtn" ion-button color="footer" type="submit" [disabled]="!myform.valid" full>Continue</button>
</div>
<p></p>
<!-- <button ion-button small clear color="dark" [disabled]="!myform.valid" type="submit" full>Continue</button> -->
</div>
</div>
</div>
</form>
<button ion-button small clear color="light" (click)="homePage()">Log In</button>
</ion-list>
</div>
</ion-content>
signup.ts
import { Component, Injectable, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { RequestOptions } from '@angular/http';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import {NgForm} from '@angular/forms';
import { HomePage } from '../home/home';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Observable } from "rxjs/Rx";
@IonicPage()
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage implements OnInit {
myform: FormGroup;
userInfo: {name: string, email: string, mobileNo: string, pin: string, confirmPin: string, otp: string} = {name: '', email: '', mobileNo: '', pin: '', confirmPin: '', otp: ''};
fm: FormGroup;
// myform:FormGroup;
username:string = '';
name:string = '';
email:string = '';
titleAlert:string = 'This field is required';
pin: string;
constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public formBuilder: FormBuilder) {
this.myform = formBuilder.group({
// username : [null, Validators.required],
name : [null, Validators.required],
email: ['', Validators.email],
mobileNo: [null, Validators.required],
pin: ['', Validators.required],
confirmPin: ['', Validators.required],
otp: ['', Validators.required],
}, {validator: this.matchingpinsValidator('pin', 'confirmPin')});
}
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
}
otpPage(){
this.navCtrl.push(OtpPage);
}
homePage(){
this.navCtrl.push(HomePage);
}
ngOnInit(): any {
this.myform = this.formBuilder.group({
'name': ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20), this.nameValidator.bind(this)]],
'mobileNo': ['', this.mobileNoValidator.bind(this)],
'email': ['', [Validators.required, this.emailValidator.bind(this)]],
'pin':[],
'confirmPin': ['', [Validators.required, this.matchingpinsValidator.bind(this)]],
otp :[]
// 'otp': ['', [Validators.required, this.otpValidator.bind(this)]],
}, {validator: this.matchingpinsValidator('pin', 'confirmPin')});
}
onSubmit() {
console.log('submitting form');
}
isValid(field: string) {
let formField = this.myform.get(field);
return formField.valid || formField.pristine;
}
nameValidator(control: FormControl): {[s: string]: boolean} {
if (!control.value.match("^[a-zA-Z ,.'-]+$")) {
return {invalidName: true};
}
}
mobileNoValidator(control: FormControl): {[s: string]: boolean} {
if (control.value !== '') {
if (!control.value.match('\\(?\\d{3}\\)?-? *\\d{3}-? *-?\\d{4}')) {
return {invalidmobileNo: true};
}
}
}
otpValidator(control: FormControl): {[s: string]: boolean} {
if (control.value !== '') {
if (!control.value.match('\\(?\\d{3}\\)?-? *\\d{3}-? *-?\\d{4}')) {
return {invalidotp: true};
}
}
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$'))) {
return {invalidEmail: true};
}
}
matchingpinsValidator(pinKey: string, confirmPinKey: string) {
return (group: FormGroup): {[key: string]: any} => {
let pin = group.controls[pinKey];
let confirmPin = group.controls[confirmPinKey];
if(confirmPin.value != ''){
if (pin.value !== confirmPin.value) {
return {
mismatchedpins: true
};
}
}
}
}
showpage = false;
generateOtp = false;
onSelect() {
console.log(this.generateOtp);
this.generateOtp = !this.generateOtp;
}
generateOtpFrommobileNo(mobileNoEnter){
let headers = new Headers({
'Content-Type': 'application/json'
});
let options = new RequestOptions({ headers: headers });
let baseurl = 'http://retail.business.ticket/maintain3/rest/transaction/generateOtp/';
let perfix = mobileNoEnter;
this.generateOtp = true;
let finalUrl = baseurl + perfix;
console.log(options);
this.http.get(finalUrl, options)
.map(res => res.json())
.subscribe(
data => {
console.log(data);
if (data){
alert(data);
// alert("Going to OTP Page");
}
else{
alert("Please check your info");
}
},
err => {
console.log("ERROR: quote-service:myHome1()")
console.log(err);
alert(err._body);
}
);
}
myHome1(fm:NgForm) {
return new Promise(resolve => {
});
}
myHome(fm:NgForm) {
return new Promise((resolve, reject) => {
let headers = new Headers({
'Content-Type': 'application/json'
});
console.log(fm.value["name"]);
var data = {
"name":fm.value["name"],
"email":fm.value["email"],
"mobileNo":fm.value["mobileNo"],
"pin":fm.value["pin"],
"confirmPin":fm.value["confirmPin"],
"otp":fm.value["otp"],
"groupId":"5" };
let options = new RequestOptions({ headers: headers });
console.log(data);
this.http.post('http://retail.business.ticket/maintain3/rest/transaction/register', data, options)
.map(res => res.json())
.catch((err: Response) => {
console.log((err.statusText || "Invalid Otp"));
reject((err.statusText || "Invalid Otp"));
reject((err.statusText || "Exhausted 3 attempts for OTP to activate member"));
return Observable.throw(err);
})
.subscribe(
data => {
console.log(data);
resolve(data);
if(data="Invalid Otp"){
alert(data);
window.location.reload();
// this.myHome(fm);
}
else {
alert(data);
this.navCtrl.push(HomePage);
}
},
err => {
console.log("ERROR: quote-service:myHome()")
console.log(err);
alert(err._body);
}
);
});
}
}