sign up ts

import { Component, OnInit } from '@angular/core';
import { AuthService, SocialUser } from 'angular4-social-login';
import { FacebookLoginProvider, GoogleLoginProvider } from 'angular4-social-login';
import { PasswordValidation } from './password-validation';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  //private user: SocialUser;
  private loggedIn: boolean;
  name: string = '';
  title = 'app';
  rForm: FormGroup;
  user = {email: '', password: ''};
  constructor(private authService: AuthService, private formBuilder: FormBuilder) {}

  ngOnInit() {
    // this.authService.authState.subscribe((user) => {
    //   this.user = user;
    //   console.log(user);
    //   this.loggedIn = (user != null);
    // });
    this.validate();
  }

  validate() {
    this.rForm = this.formBuilder.group({
      'email': [null, Validators.compose([Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,6}$')])],
      'password': [null, [Validators.compose([Validators.required, Validators.minLength(8), this.NoWhitespaceValidator])]],
      'confpassword': [null, [this.matchOtherValidator('password')]],
      'name': [null, Validators.compose([Validators.required, Validators.minLength(2), this.NoWhitespaceValidator])],
      'dob': [null, Validators.required],
      'gender': [null, Validators.required]
      });
  }

  public NoWhitespaceValidator(control: FormControl) {
    let isWhitespace = (control.value || '').trim().length === 0 ;
    let isValid = !isWhitespace;
    return isValid ? null : { 'whitespace': true };
  }

  onSignIn() {
    console.log('hello');
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
  signOut(): void {
    this.authService.signOut();
  }

  matchOtherValidator (otherControlName: string) {
      let thisControl: FormControl;
      let otherControl: FormControl;

      return function matchOtherValidate (control: FormControl) {
        if (!control.parent) {
          return null;
        }
        // Initializing the validator.
        if (!thisControl) {
          thisControl = control;
          otherControl = control.parent.get(otherControlName) as FormControl;
          if (!otherControl) {
            throw new Error('matchOtherValidator(): other control is not found in parent group');
          }
          otherControl.valueChanges.subscribe(() => {
            thisControl.updateValueAndValidity();
          });
        }

        if (!otherControl) {
          return null;
        }

        if (otherControl.value !== thisControl.value) {
          return {
            matchOther: true
          };
        }

        return null;

      };

   }
   doSignup(): void {
    if (!this.rForm.valid) {
      this.validateAllFormFields(this.rForm);
    } else {
      console.log('submitted');
    }
  }

  validateAllFormFields(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {
        this.validateAllFormFields(control);
      }
    });
  }
}