I've been fighting this for 2 days now. I just can't figure out what is wrong. It seems that my custom validators are not executed.
If you just press the 'Next' button every control is highlighted with red borders. If you fill the form, type different values in the email fields and press 'Next' the form is valid and I don't see any of the console.log's from the custom email validator.
(IF you want to excute passwordValidator you need to add '()' to your Validator Function example password1: new FormControl("",[Validators.required,this.passwordValidator()]), Even though it will throw error because FormGroup you used inside will not have a reference to the formData password1 and password2)
If you want to compare two input field you need to use formGroup inside formGroup because if you do not use form group for the formGroup will not hold object like this.
value: Object
email1: "data"
email2: ""
__proto__: Object
https://angular.io/guide/form-validation#custom-validators Use This Ref for Implement ComparePassword and Email
/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? {'forbiddenName': {value: control.value}} : null;
};
Use
type="email"instead oftype="text"in your input field unless theformgroupobject does not know the field values is valid or not.
Check : https://stackblitz.com/edit/angular-eol5eq?file=src/app/app.component.html
input type="email".