问题
I am trying to create a custom validator that will compare two passwords that should match, if they do not match a button should be disabled and if they do the user can complete registration.
After searching Stack Overflow, and looking through other sites I have rewritten the custom made validator to match previously provided answers; However, none of them seem to have any effect on the error I am encountering.
Imports
import { FormControl, Validators, FormGroup, ValidatorFn, AbstractControl } from "@angular/forms";
import { Component } from "@angular/core";
import { MatButton } from "@angular/material";
FormGroup
registerForm = new FormGroup({
first: new FormControl(null, [
Validators.required,
]),
last: new FormControl(null, [
Validators.required,
]),
id: new FormControl(null, [
Validators.required,
]),
email: new FormControl(null, [
Validators.required,
Validators.email
]),
newpass: new FormControl(null, [
Validators.required,
this.ageRangeValidator
]),
confirmpass: new FormControl(null, [
Validators.required,
this.ageRangeValidator
]),
}, {this.matchingPasswords} );
CustomValidator
matchingPasswords(c: AbstractControl): {[key: string]: any} {
let password = c.get(['passwords']);
let confirmPassword = c.get(['confirmpwd']);
if (password.value !== confirmPassword.value) {
return { mismatchedPasswords: true };
}
return null;
}
As I attempt to run this code I run into the following error.
Argument of type '{ this: any; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'. Object literal may only specify known properties, and 'this' does not exist in type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.ts(2345)
This is for a school senior project.
回答1:
You are returning null or a ValidatorError not only an object with an any property. Change the property type return of your matchingPasswords method:
matchingPasswords(c: AbstractControl): ValidationErrors | null {
let password = c.get(['passwords']);
let confirmPassword = c.get(['confirmpwd']);
if (password.value !== confirmPassword.value) {
return { mismatchedPasswords: true };
}
return null;
}
For the html reference i would check if the control had any errors and validate whether that is due to the password not match instead being required:
<div *ngIf="registerForm.get('confirmpwd').errors && registerForm.get('confirmpwd').errors['mismatchedPasswords']">
Passwords do not match
</div>
回答2:
It appears the issue is with the call to
this.matchingPasswords
A validator needs to be a static function. So don't use the this keyword. You could define the matchingPasswords as a pure javascript function or you could define it as a static function in a typescript class(recommended approach). Then include the class in your module and pass the function as ClassName.matchingPasswords;
来源:https://stackoverflow.com/questions/55519768/how-do-i-resolve-the-error-i-am-encountering-using-custom-validator-syntax