Skip to content

๐Ÿ“๐Ÿฆธ๐Ÿ“‹ Angular custom validator example that ensures the values of two form controls are equal

Notifications You must be signed in to change notification settings

bobbyg603/ngx-confirm-password-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

15 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ“๐Ÿ“‹๐Ÿฆธ Angular Super Forms: Confirm Password

Angular Super Forms Confirm Password

medium profile link twitter profile link StackBlitz

This is is a companion repo for Angular Super Forms: Confirm Password that demonstrates how to build a confirm password form with ng-bootstrap, error-tailor, component validation, styling, and form validation. 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:

git clone https://github.com/bobbyg603/ngx-confirm-password-example

Install the dependencies and start the application:

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.

Angular Super Forms Preview

๐Ÿ•ต๏ธ Inspecting the Code

There are a few things in change-password-form.component.ts that are worth mentioning.

The first thing to notice is ControlsOf<ChangePasswordFormGroup>. The ControlsOf utility type allows us to convert an interfaceโ€™s string types to FormControl<string> 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<ChangePasswordFormGroup> evaluates to:

interface ControlsOf<ChangePasswordFormGroup> {
  currentPassword: FormControl<string>;
  newPassword: FormControl<string>;
  confirmPassword: FormControl<string>;
}

More info on the ControlsOf utility type can be found here.

The next piece worth noting is that weโ€™re injecting NonNullableFormBuilder into the constructor. We use the NonNullableFormBuilder because otherwise, we get compiler errors that FormControl<string | null> cannot be assigned to an object expecting the type FormControl<string>.

constructor(formBuilder: NonNullableFormBuilder) { ... }

Finally, weโ€™ve also created an array of validators that weโ€™re passing to each of the form controls.

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, 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.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-md-6 col-lg-3 text-center">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Change Password</h5>
          <p class="card-text">Fill in the form below and click submit to update your password.</p>
          <form class="form-group" [formGroup]="formGroup" (ngSubmit)="onSubmit()" errorTailor>
            <input class="form-control" formControlName="currentPassword" placeholder="Current Password" type="password" >
            <input class="form-control mt-2" formControlName="newPassword" placeholder="New Password" type="password">
            <input class="form-control mt-2" formControlName="confirmPassword" placeholder="Confirm Password" type="password">
            <button class="btn btn-primary mt-2" type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Notice that on the very end of the <form> 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 and X, where I post programming tutorials and discuss tips and tricks that have helped make me a better programmer.

Thank you for your support โค๏ธ

About

๐Ÿ“๐Ÿฆธ๐Ÿ“‹ Angular custom validator example that ensures the values of two form controls are equal

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published