Let me present the challenge at hand:
I am currently working on developing a "custom validator" for password and email fields using AngularJS v2. The structure of my project involves multiple files interacting with each other:
/forms/form.component.ts
/validators/password.validator.ts
/validators/email.validator.ts
In the template of my form component, I have the following setup for the password and email fields:
//...
<input type="password" class="form-control" placeholder="password" [(ngModel)]="user.password" [formControl]="passwordCtrl" required />
<div *ngIf="passwordCtrl.dirty && passwordCtrl.hasError('validPassword')">PASSWORD NOT VALID</div>
//...
<input type="text" class="form-control" placeholder="email" [(ngModel)]="user.email" [formControl]="emailCtrl" required />
<div *ngIf="emailCtrl.dirty && emailCtrl.hasError('validemail')">EMAIL NOT VALID</div>
//...
Within the component (.ts) file, my implementation is as follows:
//...
import { validateEmail } from '../validators/email.validator';
import { validatePassword } from '../validators/password.validator';
//...in constructor(fb: FormBuilder) :
this.passwordCtrl = fb.control(this.user.password, Validators.compose([validatePassword])),
this.emailCtrl = fb.control(this.user.email, Validators.compose([validateEmail])),
//...
The declarations and instantiations in my component.ts seem correct because when I include a "required" validator in the "compose." part, it functions properly. However, there seems to be an issue with the validator logic itself. Here are the validators:
//email.validator.ts
import { FormControl } from '@angular/forms';
export function validateEmail(c: FormControl){
let EMAIL_REGEXP = new RegExp(`([-!#-'*+/-9=?A-Z^-~]+(\.[-!#-'*+/-9=?A-Z^-~]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?(\.[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?)+`);
return EMAIL_REGEXP.test(c.value) ? null : {
validateEmail: {
validemail: false
}
};
}
//password.validator.ts
import { FormControl } from '@angular/forms';
export function validatePassword(c: FormControl) {
let PASSWORD_REGEXP = new RegExp(`^.*(?=.{6,20})(?=.*\d)(?=.*[a-zA-Z]).*$`);
return PASSWORD_REGEXP.test(c.value) ? null : {
validatePassword: {
validpassword: false
}
};
}
You can find more information about custom validators here.
Despite tweaking the return values of "validpassword" or "validemail," the divs dependent on the validateemail and validatepassword validators never appear.
Any insights or assistance would be greatly appreciated.
Update 1 :
My objective is to create forms for both login and register functionalities within the same page. I have successfully set up 2 formGroups in my form.component.ts:
//...
this.loginForm = fb.group({
login: this.loginCtrl,
password: this.passwordCtrl
}),
this.registerForm = fb.group({
login: this.loginCtrl,
password: this.passwordCtrl,
email: this.emailCtrl
});
Each form is associated with its respective formGroup, which are linked in the template as shown below (with submit buttons included):
//...
<form (ngSubmit)="register()" [formGroup]="registerForm">
//...
<button class="btn btn-default submit" [disabled]="!registerForm.valid">Submit</button>
//...
//...
<form (ngSubmit)="login()" [formGroup]="loginForm">
//...
<button class="btn btn-default submit" [disabled]="!loginForm.valid">Login</button>
However, I have noticed that both buttons remain disabled unless all the fields are filled out. For instance, if the email field is left empty in the "registerForm" group, then the "Login" button in the "loginForm" group also remains disabled.
Shouldn't formGrouping handle such scenarios automatically?