📐📋🦸 Angular Super Forms: Confirm Password

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.

🕵️ 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 ❤️