Add Angular Input Form Mask & Validation Features to Your Web App

Forms are central to almost every modern web application. They collect essential data like user registrations, payment details, and feedback. However, without proper structure, forms can quickly frustrate users and lead to inaccurate data submissions.

This is where Angular Input Mask and Angular Input Validation make all the difference. These tools guide users as they type, enforce formatting rules, and ensure that submitted data is complete and correct.

In this tutorial, we'll build an Angular Input Form using Wijmo's InputMask component. You'll see:

• Why input masks and data validation are important
• Building an Angular form with basic styling and structure
• Adding Angular Input Masks for formatting data
• Applying Angular Input Validation for correctness
• Customizing the form with prompt characters and masks
• Handling form submissions cleanly

Ready to get started? Download Wijmo Today!

Why Use Angular Input Masks and Validation?

Users often make mistakes when filling out forms, such as missing digits in a phone number, mistyped Social Security numbers, or forgetting to complete required fields. These mistakes create friction and support overhead.

• An Angular Input Mask ensures that the data is entered in the proper format. For example, a phone number is automatically shaped into (123) 456-7890 as the user types.
• Angular Input Validation ensures that the input isn't just formatted but also complete and correct before submission.

Together, they help you create professional-grade Angular Input Forms that feel natural for users while producing clean, validated data for developers.

Step 1: Setting Up an Angular Input Form

To demonstrate, let's build a form that collects the following fields:

• Name
• Email
• Phone Number
• Social Security Number

The form will use Wijmo's InputMask control to enforce both formatting and validation. First, however, we need to set up the form's skeleton before implementing the controls.

We'll define the basic layout within the app.component.html file:

<div class="form-control">
  <div class="form-header">
    <span>User Information</span>
  </div>
  <form class="form-body" onsubmit="onSubmit(event)">
    <div class="form-footer">
      <button class="form-button" type="submit">Submit</button>
    </div>
  </form>
</div>

We also need to set up some CSS to make sure that the form is laid out in the way we want:

.form-control {
  position: absolute;
  width: 400px;
  height: 300px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -200px;
  border-radius: 15px;
  box-shadow: 1px 0 5px -2px rgb(90, 90, 90);
  text-align: center;
}

.form-header {
  height: 50px;
  width: 100%;
  line-height: 50px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background: rgb(100, 100, 252);
  font-weight: bold;
  font-size: larger;
  color: white;
}

.form-body {
  height: 100%;
  position: relative;
}

.form-footer {
  position: absolute;
  bottom: 75px;
  right: 2px;
  height: 50px;
  width: 100%
}

.form-button {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: 1px solid black;
  background: rgb(100, 100, 252);
  color: white;
  font-size: 16px;
}

.form-button:hover {
  cursor: pointer;
  background: rgb(140, 140, 255);
}

And if you run the application, you should see the following in your browser:

Step 2: Adding Angular Input Masks

Now, we'll apply Angular Input Masks using Wijmo's control library. We'll need to install Wijmo's packages first:

npm i @mescius/wijmo.angular2.all

Then, import the required module in your Angular app:

import { WjInputModule } from '@mescius/wijmo.angular2.input';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, WjInputModule],
  bootstrap: [AppComponent]
})

Then, in the styles.css file, we'll also need to import Wijmo's CSS file:

@import '@mescius/wijmo.styles/wijmo.css';

With these in place, we can now reference the Angular InputMask control in markup:

<div class="form-control">
  <div class="form-header">
    <span>User Information</span>
  </div>
  <form class="form-body" onsubmit="onSubmit(event)">
    <div class="form-element">
      <wj-input-mask #name [placeholder]="Name"></wj-input-mask>
    </div>
    <div class="form-element">
      <wj-input-mask #email [placeholder]="Email"></wj-input-mask>
    </div>
    <div class="form-element">
      <wj-input-mask #phone [placeholder]="Phone Number"></wj-input-mask>
    </div>
    <div class="form-element">
      <wj-input-mask #ssn [placeholder]="Social Security Number"></wj-input-mask>
    </div>
    <div class="form-footer">
      <button class="form-button" type="submit">Submit</button>
    </div>
  </form>
</div>

Since we've imported Wijmo's Input module, we can now reference the controls within markup, eliminating the need for TypeScript.

The last thing that we'll do here is add some CSS to style the InputMasks:

.form-element {
  text-align: center;
  margin-top: 15px;
  width: 100%;
}

Now, if you run the application, you should see the following:

Step 3: Adding Angular Input Validation

Now, we need to ensure that users don't submit incomplete data. In this sample, we want to ensure that the user's phone number and Social Security number are valid when they attempt to submit a form.

Before we assign the masks and validation, we'll set up a method to check and ensure that the input is valid. If not, we'll update the form to indicate which fields are invalid. To do this, we'll set a property, isRequired, and an event, valueChanged, to track what the user is entering and make sure that something is actually entered:

<div class="form-element">
  <wj-input-mask #phone [placeholder]="Phone Number" [isRequired]="true" (valueChanged)="validateMask(phone)"></wj-input-mask>
</div>
<div class="form-element">
  <wj-input-mask #ssn [placeholder]="Social Security Number" [isRequired]="true" (valueChanged)="validateMask(ssn)"></wj-input-mask>
</div>

Now, inside the app.component.ts file, we'll set up the validateMask method that we referenced in markup:

import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';

validateMask(ctrl: input.InputMask) {
  wijmo.toggleClass(ctrl.hostElement, 'state-invalid', !ctrl.maskFull);
}

Finally, we'll add some CSS for the class that we apply to the control when the user gives us invalid input:

.state-invalid {
  color: red;
}

Now, when a user gives us an input value that doesn't match the mask (which we'll implement momentarily), it will highlight the text in red to notify them that the form is not complete.

Step 4: Customizing the Angular Input Form

Wijmo's InputMask also gives you flexibility to fine-tune the form experience.

• Prompt Characters – Change placeholders to match your design
• Raw Values – Access the unformatted input for processing (e.g., store 1234567890 instead of (123) 456-7890)
• Custom Masks – Define unique formats for IDs, postal codes, or custom business cases

For the social security and phone number fields, we'll add some customization so that users can see the format in which we want our fields entered:

<div class="form-element">
  <wj-input-mask #phone [placeholder]="Phone Number" [isRequired]="true" (valueChanged)="validateMask(phone)" [mask]="'000-000-0000'" [promptChar]="'#'"></wj-input-mask>
</div>
<div class="form-element">
  <wj-input-mask #ssn [placeholder]="Social Security Number" [isRequired]="true" (valueChanged)="validateMask(ssn)" [mask]="'000-00-0000'" [promptChar]="'*'"></wj-input-mask>
</div>

For each of these Angular InputMasks, we set a promptChar to display to users in the field, and we also define the format to display what they enter via the mask property.

Now, when we run the application, we should see the following:

And thanks to the validation customization that we've set up, when improperly submitted, we'll see the following:

Step 5: Handling Form Submission

Finally, let's add some references to our InputMask controls and a simple submitForm method to handle the collected data:

@ViewChild('name') name: input.InputMask;
@ViewChild('email') email: input.InputMask;
@ViewChild('phone') phone: input.InputMask;
@ViewChild('ssn') ssn: input.InputMask;

isFormComplete() {
  if(this.name.value !== '' && this.email.value !== '' && this.phone.maskFull && this.social.maskFull) {
    return true;
  }
  return false;
}

onSubmit() {
  if(this.isFormComplete()) {
    alert('User Information:\nName: ' + this.name.value + 
      '\nEmail: ' + this.email.value + '\nPhone Number: ' + this.phone.value + 
      '\nSSN: ' + this.ssn.value);
  }
}

Now, if we run the app and correctly fill out all of the Angular InputMasks, we'll see the following alert:

Ready to check it out? Download Wijmo Today!

Conclusion

As you can see, you can easily build forms using Wijmo's Angular InputMask control. For more information, we offer demos, documentation, and API references for developers.

Happy coding!