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", "core-js": "2.4.1",
"moment": "2.18.1", "moment": "2.18.1",
"ng2-charts": "1.5.0", "ng2-charts": "1.5.0",
"ng2-validation-manager": "^0.3.1",
"ngx-bootstrap": "1.6.6", "ngx-bootstrap": "1.6.6",
"rxjs": "5.3.0", "rxjs": "5.3.0",
"ts-helpers": "1.1.2", "ts-helpers": "1.1.2",

View file

@ -4,7 +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()"> <form [formGroup]="signup.getForm()" (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">
@ -70,7 +70,7 @@
<div class="input-group mb-4"> <div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span> <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> </div>
<button type="submit" class="btn btn-block btn-success">Create Account</button> <button type="submit" class="btn btn-block btn-success">Create Account</button>

View file

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