File
Implements
Metadata
selector |
app-sign-up |
styleUrls |
sign-up.component.scss |
templateUrl |
./sign-up.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
onSubmit
|
onSubmit()
|
|
Returns: void
|
Private pushErrorFor
|
pushErrorFor(ctrl_name: string, msg: string)
|
|
Returns: void
|
initForm
|
initForm()
|
|
Returns: void
|
redirectIfUserLoggedIn
|
redirectIfUserLoggedIn()
|
|
Returns: void
|
ngOnDestroy
|
ngOnDestroy()
|
|
Returns: void
|
formSubmit
|
formSubmit: boolean
|
Default value: false
|
|
registerSubs
|
registerSubs: Subscription
|
|
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 with directive