### File

`src/app/auth/components/sign-up/sign-up.component.ts`

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `app-sign-up`
styleUrls | `sign-up.component.scss`
templateUrl | `./sign-up.component.html`

### Constructor

`constructor(fb: FormBuilder, store: Store, router: Router, authService: AuthService)`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:20

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:31
Returns: `void`

onSubmit
`onSubmit()`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:35
Returns: `void`

Private pushErrorFor
`pushErrorFor(ctrl_name: string, msg: string)`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:60
Returns: `void`

initForm
`initForm()`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:64
Returns: `void`

redirectIfUserLoggedIn
`redirectIfUserLoggedIn()`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:80
Returns: `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:88
Returns: `void`

### Properties

formSubmit
`formSubmit: `boolean``
Default value: `false`
Defined in src/app/auth/components/sign-up/sign-up.component.ts:18

registerSubs
`registerSubs: `Subscription``
Defined in src/app/auth/components/sign-up/sign-up.component.ts:20

signUpForm
`signUpForm: `FormGroup``
Defined in src/app/auth/components/sign-up/sign-up.component.ts:17

title
`title: `string``
Defined in src/app/auth/components/sign-up/sign-up.component.ts:19

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { FormGroup, FormBuilder, Validators } from '@angular/forms';
    import { environment } from '../../../../environments/environment';
    import { Store } from '@ngrx/store';
    import { AppState } from '../../../interfaces';
    import { Router } from '@angular/router';
    import { AuthService } from '../../../core/services/auth.service';
    import { getAuthStatus } from '../../reducers/selectors';
    import { Subscription } from 'rxjs/Subscription';

    @Component({
      selector: 'app-sign-up',
      templateUrl: './sign-up.component.html',
      styleUrls: ['./sign-up.component.scss']
    })
    export class SignUpComponent implements OnInit, OnDestroy {
      signUpForm: FormGroup;
      formSubmit = false;
      title = environment.AppName;
      registerSubs: Subscription;

      constructor(
        private fb: FormBuilder,
        private store: Store<AppState>,
        private router: Router,
        private authService: AuthService
      ) {
        this.redirectIfUserLoggedIn();
      }

      ngOnInit() {
        this.initForm();
      }

      onSubmit() {
        const values = this.signUpForm.value;
        const keys = Object.keys(values);
        this.formSubmit = true;

        if (this.signUpForm.valid) {
          this.registerSubs = this.authService.register(values).subscribe(data => {
            const errors = data.errors;
            if (errors) {
              keys.forEach(val => {
                if (errors[val]) { this.pushErrorFor(val, errors[val][0]); };
              });
            }
          });
        } else {
          keys.forEach(val => {
            const ctrl = this.signUpForm.controls[val];
            if (!ctrl.valid) {
              this.pushErrorFor(val, null);
              ctrl.markAsTouched();
            };
          });
        }
      }

      private pushErrorFor(ctrl_name: string, msg: string) {
        this.signUpForm.controls[ctrl_name].setErrors({'msg': msg});
      }

      initForm() {
        const email = '';
        const password = '';
        const password_confirmation = '';
        const mobile = '';
        const gender = '';

        this.signUpForm = this.fb.group({
          'email': [email, Validators.required],
          'password': [password, Validators.required],
          'password_confirmation': [password_confirmation, Validators.required],
          'mobile': [mobile, Validators.required],
          'gender': [gender, Validators.required],
        });
      }

      redirectIfUserLoggedIn() {
        this.store.select(getAuthStatus).subscribe(
          data => {
            if (data === true) { this.router.navigateByUrl('/'); }
          }
        );
      }

      ngOnDestroy() {
        if (this.registerSubs) { this.registerSubs.unsubscribe(); }
      }
    }

    <div class="row register-container" data-hook="">
      <div id="content" class="col-sm-12" data-hook="">
        <div class="col-md-5 col-centered">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Signup to {{title}}</h3>
            </div>
            <div id="existing-customer" class="panel-body" data-hook="login">
              <div class="register-third-party-register">
                <p class="register-button-info-text register-info-text">EASILY USING</p>
                <div class="register-button-container">
                  <button class="register-facebook register-button coming-soon">
                    <span class="register-fb-logo register-sprite"></span>
                    FACEBOOK
                  </button>
                  <button class="register-google register-button coming-soon" id="gPlusLogin"><span class="register-gplus-logo register-sprite"></span>
                      GOOGLE
                    </button>
                </div>
              </div>
              <p class="register-button-info-text register-info-text">- OR USING EMAIL -</p>
              <form class="register-register-form" novalidate="" [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
                <fieldset class="register-input-container">

                  <div class="register-input-item">
                    <input type="email" class="register-user-input-email register-user-input" name="email" formControlName="email" placeholder="Your Email Address"
                      autocomplete="off">
                    <div *ngIf="signUpForm.get('email').errors && signUpForm.get('email').touched">
                      <span class="register-error-icon">!</span>
                      <p class="register-error-message">{{signUpForm.get('email').errors.msg || 'Please enter a valid email id'}}</p>
                    </div>
                  </div>

                  <div class="register-input-item">
                    <input type="password" class="register-user-input-password register-user-input" name="password" formControlName="password"
                      placeholder="Choose Password" autocomplete="off">
                    <div *ngIf="signUpForm.get('password').errors && signUpForm.get('password').touched">
                      <span class="register-error-icon">!</span>
                      <p class="register-error-message">{{signUpForm.get('password').errors.msg || 'Password must be at least 6 characters'}}</p>
                    </div>
                  </div>

                  <div class="register-input-item">
                    <input type="password" class="register-user-input-password register-user-input" name="password_confirmation" formControlName="password_confirmation"
                      placeholder="Confirm Password" autocomplete="off">
                    <div *ngIf="signUpForm.get('password_confirmation').errors && signUpForm.get('password_confirmation').touched">
                      <span class="register-error-icon">!</span>
                      <p class="register-error-message">{{signUpForm.get('password_confirmation').errors.msg || 'Password must match'}}</p>
                    </div>
                  </div>

                  <div class="register-input-item">
                    <input type="number" min="1000000000" max="9999999999" class="register-user-input-mobile register-user-input" name="mobile"
                      formControlName="mobile" placeholder="Mobile Number (For order status updates)">
                    <div *ngIf="signUpForm.get('mobile').errors && signUpForm.get('mobile').touched">
                      <span class="register-error-icon">!</span>
                      <p class="register-error-message">{{signUpForm.get('mobile').errors.msg || 'Please enter a valid mobile number (10 digits)'}}</p>
                    </div>
                  </div>

                  <fieldset data-type="horizontal" class="register-gender">
                    <legend class="register-gender-title">I'm a</legend>

                    <input type="radio" class="register-gender-radio" id="male" name="gender" value="M" formControlName="gender">
                    <label class="register-gender-label" for="male">Male</label>

                    <input type="radio" class="register-gender-radio" id="female" name="gender" value="F" formControlName="gender">
                    <label class="register-gender-label" for="female">Female</label>

                    <div *ngIf="signUpForm.get('gender').errors && signUpForm.get('gender').touched">
                      <span class="register-gender-error-icon register-error-icon">!</span>
                      <p class="register-gender-error-message register-error-message">{{signUpForm.get('gender').errors.msg || 'Please select your gender'}}</p>
                    </div>
                  </fieldset>
                </fieldset>
                <fieldset class="register-register-button-container">
                  <button class="btn btn-danger register-register-button">REGISTER</button>
                </fieldset>
              </form>
              <div class="register-link-container">
                <small>
                  <div class="register-login-link">
                    <span class="register-info-text">Already have an account?</span>
                    <a class="register-create-account-link register-link text-danger" [routerLink]="['/auth','login']">Login!</a>
                  </div>
                </small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""