https://github.com/bobbyg603/ngx-confirm-password-example
📐🦸📋 Angular custom validator example that ensures the values of two form controls are equal
https://github.com/bobbyg603/ngx-confirm-password-example
angular error-tailor forms ng-neat reactive-forms
Last synced: about 2 months ago
JSON representation
📐🦸📋 Angular custom validator example that ensures the values of two form controls are equal
- Host: GitHub
- URL: https://github.com/bobbyg603/ngx-confirm-password-example
- Owner: bobbyg603
- Created: 2023-08-08T17:44:08.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-11T00:07:57.000Z (almost 3 years ago)
- Last Synced: 2024-04-15T09:12:30.299Z (about 2 years ago)
- Topics: angular, error-tailor, forms, ng-neat, reactive-forms
- Language: TypeScript
- Homepage: https://medium.com/p/bd95906f220f
- Size: 152 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📐📋🦸 Angular Super Forms: Confirm Password
[](https://medium.com/p/bd95906f220f)
[](https://twitter.com/bobbyg603/status/1689632582994907136)
[](https://stackblitz.com/edit/github-ktbxdp-ftgv1g)
This is is a companion repo for [Angular Super Forms: Confirm Password](https://medium.com/p/bd95906f220f) that demonstrates how to build a confirm password form with [ng-bootstrap](https://ng-bootstrap.github.io/#/home), [error-tailor](https://github.com/ngneat/error-tailor), c[omponent validation](https://medium.com/p/bd95906f220f#c02e), [styling](https://medium.com/p/bd95906f220f#b7b4), and [form validation](https://medium.com/p/bd95906f220f#e1f3). Topics in this article include how to configure error-tailor for professional looking errors, validate individual fields, as well as creating a form that validates two components have the same value.
## ☕️ TL;DR
Clone this repo to your workspace:
```sh
git clone https://github.com/bobbyg603/ngx-confirm-password-example
```
Install the dependencies and start the application:
```sh
cd ngx-confirm-password-example && npm i && npm start
```
Enter invalid values into the form and click away from the inputs. Also enter a value for new password that doesn't match the value for confirm password before hitting submit. You should see several field validation errors as well as a form validation error at the bottom.
## 🕵️ Inspecting the Code
There are a few things in [change-password-form.component.ts](https://github.com/bobbyg603/ngx-confirm-password-example/blob/main/src/app/change-password-form/change-password-form.component.ts) that are worth mentioning.
The first thing to notice is [`ControlsOf`](https://github.com/bobbyg603/ngx-confirm-password-example/blob/4fe68dd3255808e13742b573437987fb25c9b697/src/app/change-password-form/change-password-form.component.ts#L14C26-L14C26). The `ControlsOf` utility type allows us to convert an interface’s string types to `FormControl` types. This allows us to define the data model with a single interface and ensure that our form adheres to the same interface.
Here’s what `ControlsOf` evaluates to:
```ts
interface ControlsOf {
currentPassword: FormControl;
newPassword: FormControl;
confirmPassword: FormControl;
}
```
More info on the `ControlsOf` utility type can be found [here](https://betterprogramming.pub/how-to-build-a-strongly-typed-angular-14-super-form-86837965a0e5).
The next piece worth noting is that we’re injecting NonNullableFormBuilder into the constructor. We use the [`NonNullableFormBuilder`](https://angular.io/guide/typed-forms#formbuilder-and-nonnullableformbuilder) because otherwise, we get compiler errors that `FormControl` cannot be assigned to an object expecting the type `FormControl`.
```ts
constructor(formBuilder: NonNullableFormBuilder) { ... }
```
Finally, we’ve also created an array of validators that we’re passing to each of the form controls.
```ts
const validators = [Validators.required, Validators.minLength(8), Validators.pattern(upperLowerSymbolNumberRegex)];
const currentPassword = formBuilder.control('', validators);
const newPassword = formBuilder.control('', validators);
const confirmPassword = formBuilder.control('', validators);
```
Notice that we’re using `Validators.pattern(upperLowerSymbolNumberRegex)`. This regular expression was found on [Stack Overflow](https://stackoverflow.com/a/1559788/2993077), and we created a `const` with a descriptive name so that the next developer to work on the code can more easily understand the purpose of the complicated regular expression.
Last but not least, let's take a look at the template in [change-password-form.component.html](https://github.com/bobbyg603/ngx-confirm-password-example/blob/main/src/app/change-password-form/change-password-form.component.html).
```html
Change Password
Fill in the form below and click submit to update your password.
Submit
```
Notice that on the very end of the `` tag we’ve added the `errorTailor` directive. The `errorTailor` directive makes validation messages magically appear when a form control has been changed and unfocused.
## 🧑💻 Next Steps
If you liked this example, please follow me on [Medium](https://bobbyg603.medium.com/) and [X](https://twitter.com/bobbyg603), where I post programming tutorials and discuss tips and tricks that have helped make me a better programmer.
**Thank you for your support ❤️**