I have this code:
this.form = fb.group({
username: ['', Validators.compose([Validators.required])],
fullName: ['', Validators.compose([Validators.required])],
password: ['', Validators.compose([Validators.required])],
confirmPassword: ['', Validators.required],
}, {validator: matchingPasswords('password', 'confirmPassword')});
matchingPasswords:
export function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
return (group: FormGroup) => {
let password = group.controls[passwordKey];
let passwordConfirmation = group.controls[passwordConfirmationKey];
if (password.value !== passwordConfirmation.value) {
return passwordConfirmation.setErrors({mismatchedPasswords: true})
}
}
}
html:
<div class="form-group">
<input [formControl]="confirmPassword" class="form-control checking-field" type="password">
<span class="help-block text-danger" *ngIf="form.get('password').touched && form.get('password').hasError('required')">
</div>
<div class="form-group">
<input class="custom-control-input checkbox-main" type="checkbox" [(ngModel)]="policyButtonValue" [ngModelOptions]="{standalone: true}" ngDefaultControl>
<span class="custom-control-indicator"></span>
</div>
this is functional, and works perfectly, but I have a special use-case scenario that should be fixed.
You need an else
block:
if (password.value !== passwordConfirmation.value) {
passwordConfirmation.setErrors({mismatchedPasswords: true})
}
else {
passwordConfirmation.setErrors(null);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With