Fixed form and interacts with server more
This commit is contained in:
parent
830ecbffca
commit
c13dfc54fd
4 changed files with 35 additions and 29 deletions
|
@ -2,7 +2,6 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
|
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
|
||||||
import { HttpModule } from '@angular/http';
|
import { HttpModule } from '@angular/http';
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||||
|
@ -26,8 +25,6 @@ import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
HttpModule,
|
HttpModule,
|
||||||
FormsModule,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
BsDropdownModule.forRoot(),
|
BsDropdownModule.forRoot(),
|
||||||
TabsModule.forRoot(),
|
TabsModule.forRoot(),
|
||||||
ChartsModule
|
ChartsModule
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
import { P404Component } from './404.component';
|
import { P404Component } from './404.component';
|
||||||
import { P500Component } from './500.component';
|
import { P500Component } from './500.component';
|
||||||
|
@ -8,7 +10,12 @@ import { RegisterComponent } from './register.component';
|
||||||
import { PagesRoutingModule } from './pages-routing.module';
|
import { PagesRoutingModule } from './pages-routing.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [ PagesRoutingModule ],
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
PagesRoutingModule,
|
||||||
|
FormsModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
P404Component,
|
P404Component,
|
||||||
P500Component,
|
P500Component,
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="card mx-4">
|
<div class="card mx-4">
|
||||||
<div class="card-block p-4">
|
<div class="card-block p-4">
|
||||||
|
<form [formGroup]="signup" (ngSubmit)="onSubmit()">
|
||||||
<h1>Register</h1>
|
<h1>Register</h1>
|
||||||
<p class="text-muted">Create your account</p>
|
<p class="text-muted">Create your account</p>
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
|
@ -32,12 +33,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<span class="input-group-addon"><i class="icon-calendar"></i></span>
|
<span class="input-group-addon">Age Range</span>
|
||||||
<select required id="agerange" class="form-control">
|
<select class="form-control" type="text" formControlName="age_range">
|
||||||
<option value="">Please select</option>
|
<option *ngFor="let range of ageRanges" [value]="range.id">{{ range.string }}</option>
|
||||||
<option value="1">Option #1</option>
|
|
||||||
<option value="2">Option #2</option>
|
|
||||||
<option value="3">Option #3</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -52,6 +50,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="button" class="btn btn-block btn-success">Create Account</button>
|
<button type="button" class="btn btn-block btn-success">Create Account</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,15 +12,18 @@ export class RegisterComponent {
|
||||||
signup: FormGroup;
|
signup: FormGroup;
|
||||||
ageRanges: Object[];
|
ageRanges: Object[];
|
||||||
|
|
||||||
constructor(private http: Http, private formBuilder: FormBuilder, private api: ApiService) {
|
constructor(
|
||||||
|
private http: Http,
|
||||||
|
private formBuilder: FormBuilder,
|
||||||
this.api.getAgeRanges().subscribe(
|
private api: ApiService
|
||||||
|
) {
|
||||||
|
this.api.getAgeRanges()
|
||||||
|
.subscribe(
|
||||||
result => {
|
result => {
|
||||||
console.log(result);
|
console.log(result);
|
||||||
this.ageRanges = result.ages;
|
this.ageRanges = result.ages;
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
this.signup = this.formBuilder.group({
|
this.signup = this.formBuilder.group({
|
||||||
token: ['', [Validators.required]],
|
token: ['', [Validators.required]],
|
||||||
full_name: ['', [Validators.required]],
|
full_name: ['', [Validators.required]],
|
||||||
|
|
Reference in a new issue