These are the codes I've been working with:
<form [formGroup]="registerForm" novalidate (ngSubmit)="doRegister()">
<div
class="form-group"
[ngClass]="{'has-danger': registerForm.controls.email.invalid
&& !registerForm.controls.email.pristine}">
<label>Email</label>
<input
formControlName="email"
name="email"
[ngClass]="{'form-control-danger': registerForm.controls.email.invalid
&& !registerForm.controls.email.pristine}"
class="form-control"
type="email" />
</div>
<div
class="form-group"
[ngClass]="{'has-danger': registerForm.controls.password.invalid
&& !registerForm.controls.password.pristine}">
<label>Password</label>
<input
class="form-control"
type="password"
formControlName="password"
name="password"
[ngClass]="{'form-control-danger': registerForm.controls.password.invalid
&& !registerForm.controls.password.pristine}" >
</div>
<div
class="form-group"
[ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}" >
<label>Password Confirm</label>
<input
[ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}"
class="form-control"
type="password"
formControlName="passwordConfirm"
name="passwordConfirm" >
</div>
<button [disabled]="!registerForm.valid" class="btn btn-primary" type="submit">Register</button>
</form>
Here is the initialization part of the form:
this.registerForm = this.formbuilder.group({
email: ['', Validators.compose([Validators.required, validateEmail])],
password: ['', Validators.compose([Validators.required, Validators.minLength(5)])],
passwordConfirm: ['', ]
})
I am now trying to figure out how to validate the password and passwordConfirm fields, but I'm facing some challenges. I attempted to create a directive for it, but couldn't pass the formcontrol directly into it. Any help on this would be greatly appreciated. Thank you.
Edit:
<div
class="form-group"
[ngClass]="{'has-danger': registerForm.controls.password.invalid
&& !registerForm.controls.password.pristine}">
<label>Password</label>
<input
formControlName="password"
name="password"
class="form-control"
[ngClass]="{'form-control-danger': registerForm.controls.password.invalid
&& !registerForm.controls.password.pristine}"
type="password"
validateEqual="registerForm.controls.passwordConfirm"
reverse="true" >
</div>
<div
class="form-group"
[ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}" >
<label>Password Confirm</label>
<input
formControlName="passwordConfirm"
name="passwordConfirm"
[ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}"
class="form-control"
type="password"
validateEqual="registerForm.controls.password" >
</div>
Despite my efforts, the validation doesn't seem to work properly and there are no error messages displayed.