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 { 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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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]],
|
||||
|
|
Reference in a new issue