0
# Email Validation
1
2
Email validation with multiple complexity levels and intelligent typo suggestion features for common email domains.
3
4
## Capabilities
5
6
### Simple Email Validation
7
8
Basic email format validation using a simple regex pattern.
9
10
```typescript { .api }
11
/**
12
* Simple email validation using basic regex pattern
13
* @param control - AbstractControl to validate
14
* @returns ValidationErrors if invalid, null if valid
15
*/
16
static simple(control: AbstractControl): ValidationErrors | null;
17
```
18
19
**Usage Example:**
20
21
```typescript
22
import { EmailValidators } from "ngx-validators";
23
import { FormControl } from "@angular/forms";
24
25
const control = new FormControl('', EmailValidators.simple);
26
27
// Valid: "user@domain.com", "test@example.org"
28
// Invalid: "invalid-email", "user@", "@domain.com"
29
```
30
31
**Validation Pattern:** `/.+@.+\..+/i`
32
33
**Error Object:**
34
```typescript
35
{
36
simpleEmailRule: true
37
}
38
```
39
40
### Normal Email Validation
41
42
HTML5 compliant email validation following W3C specifications.
43
44
```typescript { .api }
45
/**
46
* HTML5 compliant email validation following W3C standard
47
* @param control - AbstractControl to validate
48
* @returns ValidationErrors if invalid, null if valid
49
*/
50
static normal(control: AbstractControl): ValidationErrors | null;
51
```
52
53
**Usage Example:**
54
55
```typescript
56
const control = new FormControl('', EmailValidators.normal);
57
58
// Valid: "user@example.com", "test.email+tag@domain.co.uk"
59
// Invalid: "invalid@", "user@domain", "spaces @domain.com"
60
```
61
62
**Validation Pattern:** `/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/`
63
64
**Error Object:**
65
```typescript
66
{
67
normalEmailRule: true
68
}
69
```
70
71
### Email Suggestion Validation
72
73
Intelligent email validation with typo detection and domain suggestions for common email providers.
74
75
```typescript { .api }
76
/**
77
* Email validation with intelligent typo suggestions
78
* @param options - Configuration options for email suggestions
79
* @returns ValidatorFn that validates email and provides suggestions
80
*/
81
static suggest(options?: EmailOptions): ValidatorFn;
82
```
83
84
**Usage Example:**
85
86
```typescript
87
// Using default email domains and suggestions
88
const control = new FormControl('', EmailValidators.suggest());
89
90
// Using custom email options
91
const customOptions: EmailOptions = {
92
domains: ['gmail.com', 'yahoo.com', 'company.com'],
93
secondLevelDomains: ['gmail', 'yahoo', 'company'],
94
topLevelDomains: ['com', 'org', 'net']
95
};
96
const controlWithOptions = new FormControl('', EmailValidators.suggest(customOptions));
97
```
98
99
**Email Suggestion Response:**
100
101
When a typo is detected, the validator returns:
102
103
```typescript
104
{
105
suggestion: {
106
address: "user", // The user part of the email
107
domain: "gmail.com", // Suggested domain
108
full: "user@gmail.com" // Complete suggested email
109
}
110
}
111
```
112
113
**Default Domains:** gmail.com, yahoo.com, hotmail.com, outlook.com, aol.com, icloud.com, msn.com, bellsouth.net, telus.net, comcast.net, optusnet.com.au, earthlink.net, qq.com, sky.com, mac.com, sympatico.ca, googlemail.com, att.net, xtra.co.nz, web.de, cox.net, ymail.com, aim.com, rogers.com, verizon.net, rocketmail.com, google.com, optonline.net, sbcglobal.net, me.com, btinternet.com, charter.net, shaw.ca (30 total domains)
114
115
**Default Second-Level Domains:** yahoo, hotmail, mail, live, outlook, gmx
116
117
**Default Top-Level Domains:** com, com.au, com.tw, ca, co.nz, co.uk, de, fr, it, ru, net, org, edu, gov, jp, nl, kr, se, eu, ie, co.il, us, at, be, dk, hk, es, gr, ch, no, cz, in, net.au, info, biz, mil, co.jp, sg, hu, uk (38 total TLDs)
118
119
**Algorithm Details:**
120
- Uses Sift4 distance algorithm for fuzzy string matching
121
- Default similarity threshold of 2 for domain matching
122
- Checks both full domain matches and component-level matches (second-level + top-level domain)
123
- Prioritizes exact domain matches over component matches
124
- Returns null for valid emails that exactly match known domains
125
126
## Email Utility Classes
127
128
### EmailSuggestion Class
129
130
Core email suggestion algorithm with typo detection and domain matching.
131
132
```typescript { .api }
133
class EmailSuggestion {
134
/**
135
* Analyze email for typos and provide suggestions
136
* @param email - Email address to analyze
137
* @param options - Configuration options for suggestions
138
* @returns Suggestion object if typo detected, null if valid
139
*/
140
suggest(email: string, options?: EmailOptions): { [key: string]: Suggestion } | null;
141
142
/**
143
* Split email into component parts for analysis
144
* @param email - Email address to split
145
* @returns SplittedEmail object with parsed components
146
*/
147
splitEmail(email: string): SplittedEmail | null;
148
}
149
```
150
151
**Usage Example:**
152
153
```typescript
154
import { EmailSuggestion } from "ngx-validators";
155
156
const emailSuggestion = new EmailSuggestion();
157
158
// Detect typo and get suggestion
159
const suggestion = emailSuggestion.suggest('user@gmai.com');
160
// Returns: { suggestion: { address: 'user', domain: 'gmail.com', full: 'user@gmail.com' } }
161
162
// Split email into parts
163
const parts = emailSuggestion.splitEmail('user@example.com');
164
// Returns: { address: 'user', domain: 'example.com', topLevelDomain: 'com', secondLevelDomain: 'example' }
165
```
166
167
## Template-Driven Forms Support
168
169
For template-driven forms, use the email validator directives:
170
171
### EmailValidatorDirective
172
173
Basic email validation directive.
174
175
```html
176
<input
177
type="email"
178
name="email"
179
[(ngModel)]="user.email"
180
#email="ngModel"
181
emailValidator>
182
183
<div *ngIf="email.errors?.normalEmailRule">
184
Please enter a valid email address.
185
</div>
186
```
187
188
### EmailSuggestValidatorDirective
189
190
Email validation with suggestion directive.
191
192
```html
193
<input
194
type="email"
195
name="email"
196
[(ngModel)]="user.email"
197
#email="ngModel"
198
emailSuggestValidator>
199
200
<div *ngIf="email.errors?.suggestion">
201
Did you mean: {{email.errors.suggestion.full}}?
202
</div>
203
```
204
205
## Types
206
207
```typescript { .api }
208
interface EmailOptions {
209
domains: string[];
210
secondLevelDomains: string[];
211
topLevelDomains: string[];
212
}
213
214
interface Suggestion {
215
address: string;
216
domain: string;
217
full: string;
218
}
219
220
interface SplittedEmail {
221
topLevelDomain: string;
222
secondLevelDomain: string;
223
domain: string;
224
address: string;
225
}
226
```