when i click a register button ,if i enter all the fields going to regsuccess page are i got a message like fill all required feilds.
but i want to show a message like alert using ionic2 and typescript.
html:
<button primary full (click)="register()" >Register</button>
<p>{{regMsg}}</p>
.ts file:
register(){
var _this= this;
// this.submitAttempt = true;
if(!this.registrationForm.valid){
_this.regMsg = "enter all required feilds";
}
else {
console.log("success!")
console.log(this.registrationForm.value);
_this.navCtrl.setRoot(RegThankyouPage);
}
import { AlertController } from 'ionic-angular'; // import alert controller
export class MyComponent {
regMsg: string;
constructor(public alertController: AlertController) {}
showErrorMsg(msg) {
let alert = this.alertCtrl.create({
title: msg,
subTitle: '10% of battery remaining',
buttons: ['Dismiss']
});
alert.present();
}
register(){
if (!this.registrationForm.valid) {
this.regMsg = "enter all required feilds";
console.log("form invalid");
this.showErrorMsg(this.regMsg);
} else {
console.log("Valid form");
}
}
}
To show alert you can use the Alert component which is available in ionic2 Here is how you can show the alert:
import { AlertController } from 'ionic-angular';
export class RegistrationComponent{
constructor(public alertController: AlertController) {
}
register(){
if(!this.registrationForm.valid){
let alert = this.alertController.create();
alert.setTitle("Login Failed");
alert.setSubTitle("Please fill-in all the fields");
alert.addButton("Okay!");
}
}
}
<button primary full (click)="register()" >Register</button>
**********************************************
import { AlertController } from 'ionic-angular'; // import alert
controller
export class MyComponent {
public alertCtrl: AlertController) {}
showError(msg : string) {
let alert = this.alertCtrl.create({
title: 'Error',
subTitle: msg,
buttons: ['OK']
});
alert.present();
}
register(){
if (!this.registrationForm.valid) {
this.showError("enter all required fields");
} else {
console.log("Valid form");
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.