Angular 2 Angular 2 Forms Update Simple Password Change Form with Multi Control Validation
Example
The below examples use the new form API introduced in RC3.
pw-change.template.html
<form class="container" [formGroup]="pwChangeForm">
<label for="current">Current Password</label>
<input id="current" formControlName="current" type="password" required><br />
<label for="newPW">New Password</label>
<input id="newPW" formControlName="newPW" type="password" required><br/>
<div *ngIf="newPW.touched && newPW.newIsNotOld">
New password can't be the same as current password.
</div>
<label for="confirm">Confirm new password</label>
<input id="confirm" formControlName="confirm" type="password" required><br />
<div *ngIf="confirm.touched && confirm.errors.newMatchesConfirm">
The confirmation does not match.
</div>
<button type="submit">Submit</button>
</form>
pw-change.component.ts
import {Component} from '@angular/core'
import {REACTIVE_FORM_DIRECTIVES, FormBuilder, AbstractControl, FormGroup,
Validators} from '@angular/forms'
import {PWChangeValidators} from './pw-validators'
@Component({
moduleId: module.id
selector: 'pw-change-form',
templateUrl: `./pw-change.template.html`,
directives: [REACTIVE_FORM_DIRECTIVES]
})
export class PWChangeFormComponent {
pwChangeForm: FormGroup;
// Properties that store paths to FormControls makes our template less verbose
current: AbstractControl;
newPW: AbstractControl;
confirm: AbstractControl;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.pwChangeForm = this.fb.group({
current: ['', Validators.required],
newPW: ['', Validators.required],
confirm: ['', Validators.required]
}, {
// Here we create validators to be used for the group as a whole
validator: Validators.compose([
PWChangeValidators.newIsNotOld,
PWChangeValidators.newMatchesConfirm
])
);
this.current = this.pwChangeForm.controls['current'];
this.newPW = this.pwChangeForm.controls['newPW'];
this.confirm = this.pwChangeForm.controls['confirm'];
}
}
pw-validators.ts
import {FormControl, FormGroup} from '@angular/forms'
export class PWChangeValidators {
static OldPasswordMustBeCorrect(control: FormControl) {
var invalid = false;
if (control.value != PWChangeValidators.oldPW)
return { oldPasswordMustBeCorrect: true }
return null;
}
// Our cross control validators are below
// NOTE: They take in type FormGroup rather than FormControl
static newIsNotOld(group: FormGroup){
var newPW = group.controls['newPW'];
if(group.controls['current'].value == newPW.value)
newPW.setErrors({ newIsNotOld: true });
return null;
}
static newMatchesConfirm(group: FormGroup){
var confirm = group.controls['confirm'];
if(group.controls['newPW'].value !== confirm.value)
confirm.setErrors({ newMatchesConfirm: true });
return null;
}
}
A gist including some bootstrap classes can be found here.
