Skip to content

Instantly share code, notes, and snippets.


Created Jul 25, 2017
What would you like to do?
Generated template for the SignupPage page.
See for more info on
Ionic pages and navigation.
<ion-content padding>
<form [FormGroup]="myForm" (submit)="signUp()">
<ion-icon name="mail" item-left></ion-icon>
<ion-label stacked>email</ion-label>
<ion-input [(ngModel)]="" type="email" name="email" autocorrect="off" autocapitalize="none"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
<ion-icon name="key" item-left></ion-icon>
<ion-label stacked>Password</ion-label>
<ion-input [(ngModel)]="userModel.password" name ="password" type="password" required minlength="6" ></ion-input>
<div padding-left padding-right padding-top>
<button ion-button block primary [disabled]="!myForm.valid">Registrate</button>
import { Component } from '@angular/core';
import { NavController, NavParams , LoadingController, AlertController} from 'ionic-angular';
* Generated class for the SignupPage page.
* See for more info
* on Ionic pages and navigation.
import { AuthService } from '../../providers/auth-service';
import { UserModel } from '../../models/user-model';
import { SigninPage } from '../signin/signin';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
selector: 'page-signup',
templateUrl: 'signup.html',
export class SignupPage {
userModel :UserModel;
//inyectamos los servicios al contructor
constructor(public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public alertCtrl : AlertController,
public authService :AuthService,
public formBuilder : FormBuilder) {
this.userModel =new UserModel();
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
signUp() {
//mostramos una ventana mientra se registra al usuario
let loading = this.loadingCtrl.create({
content: 'Creando cuenta. Por favor, espere...'
//Utilizamos el servicio AuthService que injectamos en el contructor para ejecutar su método createUserWithEmailAndPassword()
//el cual recibe el modelo UserModel el cual ya va a tener los datos del usuario capturados en la vista
this.authService.createUserWithEmailAndPassword(this.userModel).then(result => {
// el metodo devuelve la promesa ,vamos a suponer que el usuario fue registrado por lo que enviamos al usuario
// a la pantalla de inicio de sesión para que pueda utilizar sus nuevas credenciales y entrar
}).catch(error => {//si existe un error
this.alert('Error', 'Ha ocurrido un error inesperado. Por favor intente nuevamente.');
}//cierre del metodo signUp
alert(title :string , message :string ){
let alert =this.alertCtrl.create({
title : title,
subTitle: message,
buttons :['OK']
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.