Created
May 22, 2023 15:29
-
-
Save timchenkomo/6c08c2eb31e3e3498307c68a0c248214 to your computer and use it in GitHub Desktop.
Angular 2 validator to compare two controls in a form (e.g. passwords on signup forms) v0.1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** '/src/app/shared/equal-value-validator.ts' */ | |
| /** Just a demo/draft, please ensure your implementation is sound before going live */ | |
| import { FormGroup, ValidatorFn } from '@angular/forms'; | |
| /** this control value must be equal to given control's value */ | |
| export function equalValueValidator(targetKey: string, toMatchKey: string): ValidatorFn { | |
| return (group: FormGroup): {[key: string]: any} => { | |
| const target = group.controls[targetKey]; | |
| const toMatch = group.controls[toMatchKey]; | |
| if (target.touched && toMatch.touched) { | |
| const isMatch = target.value === toMatch.value; | |
| // set equal value error on dirty controls | |
| if (!isMatch && target.valid && toMatch.valid) { | |
| toMatch.setErrors({equalValue: targetKey}); | |
| const message = targetKey + ' != ' + toMatchKey; | |
| return {'equalValue': message}; | |
| } | |
| if (isMatch && toMatch.hasError('equalValue')) { | |
| toMatch.setErrors(null); | |
| } | |
| } | |
| return null; | |
| }; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** /src/app/auth/register/register.component.ts */ | |
| import { Component, OnInit } from '@angular/core'; | |
| import { Router } from '@angular/router'; | |
| import { FormGroup, Validators, FormBuilder } from '@angular/forms'; | |
| import { equalValueValidator } from '../../shared/equal-value-validator'; | |
| @Component({ | |
| selector: 'app-register', | |
| templateUrl: './register.component.html', | |
| styleUrls: ['./register.component.css'] | |
| }) | |
| export class RegisterComponent implements OnInit { | |
| private registrationForm: FormGroup; | |
| private submitError = false; | |
| private formErrors = { | |
| 'username': '', | |
| 'password': '', | |
| 'confirmPassword': '' | |
| }; | |
| constructor(private router: Router, | |
| private fb: FormBuilder) { } | |
| ngOnInit() { | |
| this.buildForm(); | |
| } | |
| buildForm() { | |
| this.registrationForm = this.fb.group({ | |
| 'username': ['', [ | |
| Validators.required | |
| ] | |
| ], | |
| 'password': ['', [ | |
| Validators.required, | |
| Validators.minLength(8) | |
| ] | |
| ], | |
| 'confirmPassword': ['', [ | |
| Validators.required, | |
| Validators.minLength(8) | |
| ] | |
| ] | |
| }, | |
| {validator: equalValueValidator('password', 'confirmPassword')} // key is to validate on the form group | |
| ); | |
| } | |
| register() { | |
| // do somthing | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment