Expand registration form

marvac · Feb 1, 2019 · 50de1bf · 50de1bf
1 parent edb9c93
commit 50de1bf
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/Client/src/app/components/register/register.component.html b/Client/src/app/components/register/register.component.html
@@ -1,6 +1,15 @@
 <form [formGroup]="registerForm" (ngSubmit)="register()">
   <h2 class="text-center text-primary">Sign Up</h2>
   <hr>
+  <div class="form-group">
+    <label class="control-label" style="margin-right:20px">I am a: </label>
+    <label class="radio-inline">
+      <input class="mr-1" type="radio" value="male" formControlName="gender">Male
+    </label>
+    <label class="radio-inline ml-3">
+      <input class="mr-1" type="radio" value="female" formControlName="gender">Female
+    </label>
+  </div>
 
   <div class="form-group">
     <input [ngClass]="{'is-invalid':registerForm.get('username').errors && registerForm.get('username').touched}"
@@ -11,6 +20,29 @@ <h2 class="text-center text-primary">Sign Up</h2>
     <div class="invalid-feedback">Please choose a username</div>
   </div>
 
+  <div class="form-group">
+    <input [ngClass]="{'is-invalid': registerForm.get('knownAs').errors && registerForm.get('knownAs').touched}" class="form-control"
+           placeholder="Known as" formControlName="knownAs">
+    <div class="invalid-feedback" *ngIf="registerForm.get('knownAs').touched && registerForm.get('knownAs').hasError('required')">Known as is required</div>
+  </div>
+
+  <div class="form-group">
+    <input [ngClass]="{'is-invalid': registerForm.get('dateOfBirth').errors && registerForm.get('dateOfBirth').touched}" class="form-control"
+           placeholder="Date of Birth" formControlName="dateOfBirth" type="date">
+    <div class="invalid-feedback" *ngIf="registerForm.get('dateOfBirth').touched && registerForm.get('dateOfBirth').hasError('required')">Date of Birth is required</div>
+  </div>
+
+  <div class="form-group">
+    <input [ngClass]="{'is-invalid': registerForm.get('city').errors && registerForm.get('city').touched}" class="form-control"
+           placeholder="City" formControlName="city">
+    <div class="invalid-feedback" *ngIf="registerForm.get('city').touched && registerForm.get('city').hasError('required')">City is required</div>
+  </div>
+  <div class="form-group">
+    <input [ngClass]="{'is-invalid': registerForm.get('country').errors && registerForm.get('country').touched}" class="form-control"
+           placeholder="Country" formControlName="country">
+    <div class="invalid-feedback" *ngIf="registerForm.get('country').touched && registerForm.get('country').hasError('required')">Country is required</div>
+  </div>
+
   <div class="form-group">
     <input [ngClass]="{'is-invalid':registerForm.get('password').errors && registerForm.get('password').touched}"
            type="password"
@@ -32,7 +64,7 @@ <h2 class="text-center text-primary">Sign Up</h2>
            class="form-control"
            placeholder="Confirm Password">
 
-    <div *ngIf="registerForm.get('confirmPassword').hasError('required') && registerForm.get('confirmPassword').touched" class="invalid-feedback">Password is required</div>
+    <div *ngIf="registerForm.get('confirmPassword').hasError('required') && registerForm.get('confirmPassword').touched" class="invalid-feedback">Confirm password is required</div>
     <div *ngIf="registerForm.hasError('mismatch') && registerForm.get('confirmPassword').touched" class="invalid-feedback">Passwords must match</div>
   </div>
 

diff --git a/Client/src/app/components/register/register.component.ts b/Client/src/app/components/register/register.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { AuthService } from 'src/app/services/auth.service';
 import { AlertifyService } from 'src/app/services/alertify.service';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-register',
@@ -14,14 +14,26 @@ export class RegisterComponent implements OnInit {
   model: any = {};
   registerForm: FormGroup;
 
-  constructor(private authService: AuthService, private alertify: AlertifyService) { }
+  constructor(
+    private authService: AuthService,
+    private alertify: AlertifyService,
+    private formBuilder: FormBuilder) { }
 
   ngOnInit() {
-    this.registerForm = new FormGroup({
-      username: new FormControl('', Validators.required),
-      password: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]),
-      confirmPassword: new FormControl('', Validators.required)
-    }, this.passwordConfirmationValidator);
+    this.createRegisterForm();
+  }
+
+  createRegisterForm() {
+    this.registerForm = this.formBuilder.group({
+      gender: ['male'],
+      username: ['', Validators.required],
+      knownAs: ['', Validators.required],
+      dateOfBirth: [null, Validators.required],
+      city: ['', Validators.required],
+      country: ['', Validators.required],
+      password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
+      confirmPassword: ['', Validators.required]
+    }, { validator: this.passwordConfirmationValidator });
   }
 
   register() {