import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.page.html',
  styleUrls: ['./sign-up.page.scss'],
})
export class SignUpPage implements OnInit {

    signupForm: FormGroup;
    errorMsg: string;

    constructor(private fb: FormBuilder, private authService: AuthService, private router: Router) {
        this.initForm();
    }

  ngOnInit() {
  }

    initForm() {
        this.signupForm = this.fb.group({
            email: ["", [Validators.required, Validators.email]],
            password: ["", [Validators.required, Validators.pattern(/[0-9a-z]{6,/)]]
        });
    }

    onSubmit() {
        const email = this.signupForm.get("email").value;
        const password = this.signupForm.get("password").value;

        this.authService.createNewUser(email, password)
            .then(() => {
                this.router.navigate(["/home"]);
            },
                (error) => {
                    this.errorMsg = error;
                })
    }
}

<ion-header>
  <ion-toolbar>
    <ion-title>Création compte</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="signupForm" (ng-submit)="onSubmit()">
    <ion-label placeholder="email" for="email"></ion-label>
    <ion-input typeof="text" id="inputEmail" formControlName="email"></ion-input>

    <ion-label placeholder="mot de passe" for="password"></ion-label>
    <ion-input typeof="password" id="inputPassword" formControlName="password"></ion-input>

    <ion-button color="primary" value="S'enregistrer" typeof="submit"></ion-button>
  </form>
  <h3>{{errorMsg}}</h3>
</ion-content>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AngularFireAuth, AngularFireAuthModule } from '@angular/fire/auth';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    AngularFireAuthModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }