ng-pattern is used in template-driven forms in Angular to validate input using a regular expression. If it’s not working properly, there could be several reasons. Let’s go through common issues and solutions step by step.
1. Basic Example of ng-pattern
If you want to validate an email field:
<input type="text" name="email" ngModel required [pattern]="'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$'" #email="ngModel">
<div *ngIf="email.invalid && email.touched">
Invalid email format!
</div>
If this does not work, check the following issues.
2. Common Issues & Fixes
1. pattern Should Be Wrapped in Square Brackets ([])
Angular treats pattern="..." as a string literal. Instead, wrap it inside [pattern] to use a variable or expression.
Incorrect:
<input type="text" name="username" ngModel pattern="^[a-zA-Z]+$" required>
Here, Angular treats it as plain text instead of a regular expression.
Fix:
<input type="text" name="username" ngModel [pattern]="'^[a-zA-Z]+$'" required #username="ngModel">
2. Missing name Attribute in Input
Angular validations do not work without a name attribute.
Incorrect:
<input type="text" ngModel [pattern]="'^[a-zA-Z]+$'" required>
Here, validation will not work because there is no name attribute.
Fix:
<input type="text" name="username" ngModel [pattern]="'^[a-zA-Z]+$'" required #username="ngModel">
3. Using Wrong Regular Expression Syntax
Make sure your regular expression is correct.
Incorrect (\d is not properly escaped):
<input type="text" name="phone" ngModel [pattern]="'^\d{10}$'" required>
The \d should be double-escaped because Angular treats \ as an escape character.
Fix: Properly Escape \
<input type="text" name="phone" ngModel [pattern]="'^\\d{10}$'" required #phone="ngModel">
Now, this will validate only 10-digit numbers.
4. Not Checking Validation Properly in the Template
Make sure you’re checking the right condition for showing the error message.
Incorrect Condition:
<div *ngIf="username.invalid">
Invalid username!
</div>
This always shows the message because username.invalid is true on page load.
Fix: Use .touched
<div *ngIf="username.invalid && username.touched">
Invalid username!
</div>
Now, the error only appears after the user interacts.
5. Using pattern Without required
If pattern is used without required, it allows an empty value but fails validation when something is entered incorrectly.
Incorrect:
<input type="text" name="username" ngModel [pattern]="'^[a-zA-Z]+$'">
Here, an empty value is considered valid.
Fix: Add required
<input type="text" name="username" ngModel [pattern]="'^[a-zA-Z]+$'" required>
6. Not Using FormsModule in app.module.ts
If FormsModule is not imported, ngModel and ng-pattern will not work.
If FormsModule is Missing:
import { NgModule } from '@angular/core';
@NgModule({
imports: [
// FormsModule is missing
]
})
export class AppModule { }
Fix: Import FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule // Add this
]
})
export class AppModule { }
3. Full Working Example
Example: Username Validation (Only Alphabets)
<form #myForm="ngForm">
<label>Username (Only letters):</label>
<input type="text" name="username" ngModel [pattern]="'^[a-zA-Z]+$'" required #username="ngModel">
<div *ngIf="username.invalid && username.touched">
Username must contain only letters!
</div>
<button [disabled]="myForm.invalid">Submit</button>
</form>
Now validation works perfectly!
4. Common Use Cases & Patterns
| Use Case | Pattern |
|---|---|
| Only letters (no numbers, no spaces) | '^[a-zA-Z]+$' |
| Only numbers (exactly 10 digits) | '^\\d{10}$' |
| Only numbers (1 to 5 digits) | '^\\d{1,5}$' |
| Alphanumeric (letters & numbers) | '^[a-zA-Z0-9]+$' |
'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$' | |
| Password (at least 8 characters, 1 letter, 1 number) | '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$' |