Added password confirmation validation

Still needs formatting warnings for the form
This commit is contained in:
piratefinn 2017-05-12 18:18:28 +01:00
parent 84d644636a
commit bc278b986b
3 changed files with 30 additions and 23 deletions

View file

@ -30,6 +30,7 @@
"core-js": "2.4.1",
"moment": "2.18.1",
"ng2-charts": "1.5.0",
"ng2-validation-manager": "^0.3.1",
"ngx-bootstrap": "1.6.6",
"rxjs": "5.3.0",
"ts-helpers": "1.1.2",

View file

@ -4,7 +4,7 @@
<div class="col-md-6">
<div class="card mx-4">
<div class="card-block p-4">
<form [formGroup]="signup" (ngSubmit)="onSubmit()">
<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<h1>Register</h1>
<p class="text-muted">Create your account</p>
<div class="input-group mb-3">
@ -70,7 +70,7 @@
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="password" placeholder="Repeat password">
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
</div>
<button type="submit" class="btn btn-block btn-success">Create Account</button>

View file

@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ValidationManager } from "ng2-validation-manager";
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import {Router } from '@angular/router';
@ -9,42 +10,47 @@ import 'rxjs/add/operator/map';
templateUrl: 'register.component.html',
providers: [ApiService]
})
export class RegisterComponent {
signup: FormGroup;
signup: ValidationManager;
ageRanges: Object[];
constructor(
private http: Http,
private formBuilder: FormBuilder,
private router: Router,
private api: ApiService
private api: ApiService,
) {
this.api.getAgeRanges()
.subscribe(
result => {
console.log(result);
this.ageRanges = result.ages;
}
result => {
console.log(result);
this.ageRanges = result.ages;
}
);
this.signup = this.formBuilder.group({
token: ['', [Validators.required]],
usertype: ['', [Validators.required]],
name: ['', [Validators.required]],
full_name: ['', [Validators.required]],
display_name: ['', [Validators.required]],
email: ['', [Validators.required]],
postcode: ['', [Validators.required]],
street_name: ['', [Validators.required]],
town: ['', [Validators.required]],
age_range: ['', [Validators.required]],
password: ['', [Validators.required]],
this.signup = new ValidationManager({
token: 'required',
usertype: 'required',
name: 'required',
full_name: 'required',
display_name: 'required',
email: 'required',
postcode: 'required',
street_name: 'required',
town: 'required',
age_range: 'required',
password: 'required',
confirmpassword: 'required|equalTo:password'
});
}
onSubmit() {
console.log(this.signup.value);
console.log(this.signup.isValid());
this.api
console.log(this.signup.getForm().value);
/* this.api
.register(this.signup.value)
.subscribe(
result => {
@ -54,7 +60,7 @@ export class RegisterComponent {
error => {
console.log( error._body );
}
);
);*/
}