Fixed form and interacts with server more

src/app/app.module.ts

@@ -2,7 +2,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { HttpModule } from '@angular/http';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -26,8 +25,6 @@ import { SimpleLayoutComponent } from './layouts/simple-layout.component';
     BrowserModule,
     AppRoutingModule,
     HttpModule,
-	FormsModule,
-	ReactiveFormsModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     ChartsModule

src/app/pages/pages.module.ts

@@ -1,4 +1,6 @@
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 import { P404Component } from './404.component';
 import { P500Component } from './500.component';
@@ -8,7 +10,12 @@ import { RegisterComponent } from './register.component';
 import { PagesRoutingModule } from './pages-routing.module';
 
 @NgModule({
-  imports: [ PagesRoutingModule ],
+  imports: [
+	CommonModule,
+	PagesRoutingModule,
+	FormsModule,
+	ReactiveFormsModule,
+  ],
   declarations: [
     P404Component,
     P500Component,

src/app/pages/register.component.html

@@ -4,6 +4,7 @@
       <div class="col-md-6">
         <div class="card mx-4">
           <div class="card-block p-4">
+			<form [formGroup]="signup" (ngSubmit)="onSubmit()">
             <h1>Register</h1>
             <p class="text-muted">Create your account</p>
             <div class="input-group mb-3">
@@ -32,12 +33,9 @@
             </div>
 			
 			<div class="input-group mb-3">
-				<span class="input-group-addon"><i class="icon-calendar"></i></span>
-                <select required id="agerange" class="form-control">
-                  <option value="">Please select</option>
-                  <option value="1">Option #1</option>
-                  <option value="2">Option #2</option>
-                  <option value="3">Option #3</option>
+				<span class="input-group-addon">Age Range</span>
+                <select class="form-control" type="text" formControlName="age_range">
+                  <option *ngFor="let range of ageRanges" [value]="range.id">{{ range.string }}</option>
                 </select>
             </div>
 
@@ -52,6 +50,7 @@
             </div>
 
             <button type="button" class="btn btn-block btn-success">Create Account</button>
+            </form>
 		  </div>
         </div>
       </div>

src/app/pages/register.component.ts

@@ -12,15 +12,18 @@ export class RegisterComponent {
   signup: FormGroup;
   ageRanges: Object[];
   
-  constructor(private http: Http, private formBuilder: FormBuilder, private api: ApiService) {
-	  
-
-  this.api.getAgeRanges().subscribe(
+  constructor(
+	private http: Http,
+	private formBuilder: FormBuilder,
+	private api: ApiService
+	) {	  
+	  this.api.getAgeRanges()
+		.subscribe(
 			result => {
 				console.log(result);
 				this.ageRanges = result.ages;
 			}
-)
+		);
 	  this.signup = this.formBuilder.group({
 		token:        ['', [Validators.required]],
 		full_name:    ['', [Validators.required]],