import { Component , OnInit } from '@angular/core' ; import { Router } from '@angular/router' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { first } from 'rxjs/operators' ; import { ToastrService } from 'ngx-toastr' ; import { UserService } from '../../services/user.service' ; @ Component ( { selector : 'app-register-page' , templateUrl : './register-page.component.html' , styleUrls : [ './register-page.component.css' ] } ) export class RegisterPageComponent implements OnInit { registerForm : FormGroup = this . formBuilder . group ( { username : [ '' , Validators . required ] , email : [ '' , Validators . required ] , password : [ '' , [ Validators . required , Validators . minLength ( 6 ) ] ] , confirmPassword : [ '' , Validators . required ] } , { validator : this . mustMatch ( 'password' , 'confirmPassword' ) } ) ; loading = false ; submitted = false ; constructor ( private formBuilder , private router , private userService , private toastr ) { } ngOnInit ( ) { } get f ( ) { return this . registerForm . controls ; } mustMatch ( controlName , matchingControlName ) { return ( formGroup ) => { const control = formGroup . controls [ controlName ] ; const matchingControl = formGroup . controls [ matchingControlName ] ; if ( matchingControl . errors && ! matchingControl . errors [ 'mustMatch' ] ) { return ; } if ( control . value !== matchingControl . value ) { matchingControl . setErrors ( { mustMatch : true } ) ; } else { matchingControl . setErrors ( null ) ; } } ; } onSubmit ( ) { this . submitted = true ; if ( this . registerForm . invalid ) { return ; } this . loading = true ; this . userService . register ( this . registerForm . value ) . pipe ( first ( ) ) . subscribe ( ( data ) => { this . toastr . success ( 'Registration successful!' ) ; this . loading = false ; this . router . navigate ( [ '/login' ] ) ; } , ( error ) => { this . toastr . error ( error ) ; this . loading = false ; } ) ; } }