Merge pull request #65 from Nightapes/email-validation

Email validation

README.md

@@ -151,6 +151,7 @@ import {EmailValidators} from 'ngx-validators'
 
 email: FormControl = new FormControl('', EmailValidators.normal);
 email2: FormControl = new FormControl('', EmailValidators.simple);
+email3: FormControl = new FormControl('', EmailValidators.suggest);
 ```
 
 ### Universal
@@ -247,12 +248,23 @@ export class AppModule {
 ```
 
 ### Email
+
+#### Normal
+
 ```html
 <form>
 <input type="text" [(ngModel)]="model.email" name="email" #formControl="ngModel" email>
 <span *ngIf="formControl.hasError('normalEmailRule')">Is not a email</span>
 </form>
+```
+
+#### Suggest
 
+```html
+<form>
+<input type="text" [(ngModel)]="model.email" name="email" #formControl="ngModel" emailSuggest>
+<span *ngIf="formControl.hasError('suggestion')">Maybe check the mail again</span>
+</form>
 ```
 
 ### Universal
@@ -306,7 +318,6 @@ export class AppModule {
 
 ##Todo
 
-* Implement  https://github.com/mailcheck/mailcheck
 * Add more password rules
 * Add address validator
 

examples/src/app/email-validator/email-validator.component.html

@@ -15,9 +15,13 @@
     <mat-card-content>
         <ng-container *ngIf="selected =='reactiveForm'">
             <app-reactive-email *ngIf="item == 'normal'"></app-reactive-email>
+            <app-reactive-email-suggest *ngIf="item == 'suggest'"></app-reactive-email-suggest>
+            <div *ngIf="item == 'suggest'">Try test@gmai.con</div>
         </ng-container>
         <ng-container *ngIf="selected =='form'">
             <app-email *ngIf="item == 'normal'"></app-email>
+            <app-email-suggest *ngIf="item == 'suggest'"></app-email-suggest>
+            <div *ngIf="item == 'suggest'">Try test@gmai.con</div>
         </ng-container>
     </mat-card-content>
 </mat-card>

examples/src/app/email-validator/email-validator.module.ts

@@ -1,5 +1,5 @@
 import { MatCardModule, MatListModule, MatFormFieldModule, MatTooltipModule, MatInputModule, MatSelectModule } from '@angular/material';
-import { NgModule, Component } from '@angular/core';
+import { NgModule, } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule, MatTabsModule } from '@angular/material';
 import { Routes, RouterModule } from '@angular/router';
@@ -10,6 +10,8 @@ import { ReactiveFormEmailComponent } from './reactive-form/email/reactive-form-
 
 import { FormEmailComponent } from './form/email/form-email.component';
 import { ValidatorsModule } from 'ngx-validators';
+import { ReactiveFormEmailSuggestComponent } from './reactive-form/suggest/reactive-form-email-suggest.component';
+import { FormEmailSuggestComponent } from './form/suggest/form-email-suggest.component';
 
 
 
@@ -46,8 +48,10 @@ const routes: Routes = [
   ],
   declarations: [
     ReactiveFormEmailComponent,
+    ReactiveFormEmailSuggestComponent,
     FormEmailComponent,
-    EmailValidatorComponent
+    EmailValidatorComponent,
+    FormEmailSuggestComponent
   ]
 })
 export class EmailModule { }

examples/src/app/email-validator/form/email/form-email.component.html

@@ -1,6 +1,6 @@
 <form>
     <mat-form-field>
         <input type="email" matInput [(ngModel)]="model" name="email" #formControl="ngModel" email placeholder="Email">
-        <mat-hint *ngIf="formControl.hasError('normalEmailRule')" class="error">Needs to be a number</mat-hint>
+        <mat-hint *ngIf="formControl.hasError('normalEmailRule')" class="error">Is not a email</mat-hint>
     </mat-form-field>
 </form>

examples/src/app/email-validator/form/suggest/form-email-suggest.component.html

@@ -0,0 +1,6 @@
+<form>
+    <mat-form-field>
+        <input type="email" matInput [(ngModel)]="model" name="email" #formControl="ngModel" [emailSuggest]="customOptions" placeholder="Email">
+        <mat-hint *ngIf="formControl.hasError('suggestion')" class="error"> <span>Did you mean:</span><span class="clickable" (click)="addToForm(formControl.getError('suggestion').full)">{{formControl.getError('suggestion').domain}}</span> </mat-hint>
+    </mat-form-field>
+</form>

examples/src/app/email-validator/form/suggest/form-email-suggest.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { EmailOptions } from 'ngx-validators/components/email/email-util';
+
+@Component({
+  selector: 'app-email-suggest',
+  templateUrl: './form-email-suggest.component.html'
+})
+
+export class FormEmailSuggestComponent {
+  model: any;
+
+  // Add your own domains via EmailOptions
+  customOptions: EmailOptions = {
+    domains: ['msn.com', 'bellsouth.net',
+      'telus.net', 'comcast.net', 'optusnet.com.au',
+      'earthlink.net', 'qq.com', 'sky.com', 'icloud.com',
+      'mac.com', 'sympatico.ca', 'googlemail.com',
+      'att.net', 'xtra.co.nz', 'web.de', 'mymail.com',
+      'cox.net', 'gmail.com', 'ymail.com', 'yahoo.com',
+      'aim.com', 'rogers.com', 'verizon.net',
+      'rocketmail.com', 'google.com', 'optonline.net',
+      'sbcglobal.net', 'aol.com', 'me.com', 'btinternet.com',
+      'charter.net', 'shaw.ca'],
+    secondLevelDomains: ['yahoo', 'hotmail', 'mail', 'live', 'outlook', 'gmx', 'mymail'],
+    topLevelDomains: ['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', 'net.au', 'info', 'biz', 'mil', 'co.jp', 'sg', 'hu', 'uk']
+  };
+
+  addToForm(email) {
+    this.model = email;
+  }
+}

examples/src/app/email-validator/reactive-form/email/reactive-form-email.component.ts

@@ -17,4 +17,8 @@ export class ReactiveFormEmailComponent implements OnInit {
       'email': this.email,
     });
   }
+
+  addToForm(email) {
+    this.form.get('email').setValue(email);
+  }
 }

examples/src/app/email-validator/reactive-form/suggest/reactive-form-email-suggest.component.html

@@ -0,0 +1,6 @@
+<form [formGroup]="form">
+    <mat-form-field>
+        <input matInput formControlName="email" name="email" placeholder="Email">
+        <mat-hint *ngIf="email.hasError('suggestion')" class="error"> <span>Did you mean:</span><span class="clickable" (click)="addToForm(email.getError('suggestion').full)">{{email.getError('suggestion').domain}}</span> </mat-hint>
+    </mat-form-field>
+</form>

examples/src/app/email-validator/reactive-form/suggest/reactive-form-email-suggest.component.ts

@@ -0,0 +1,43 @@
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { EmailValidators } from 'ngx-validators';
+import { Component, OnInit } from '@angular/core';
+import { EmailOptions } from 'ngx-validators/components/email/email-util';
+
+@Component({
+  selector: 'app-reactive-email-suggest',
+  templateUrl: './reactive-form-email-suggest.component.html'
+})
+export class ReactiveFormEmailSuggestComponent implements OnInit {
+
+  // Add your own domains via EmailOptions
+  customOptions: EmailOptions = {
+    domains: ['msn.com', 'bellsouth.net',
+      'telus.net', 'comcast.net', 'optusnet.com.au',
+      'earthlink.net', 'qq.com', 'sky.com', 'icloud.com',
+      'mac.com', 'sympatico.ca', 'googlemail.com',
+      'att.net', 'xtra.co.nz', 'web.de',
+      'cox.net', 'gmail.com', 'ymail.com', 'yahoo.com',
+      'aim.com', 'rogers.com', 'verizon.net',
+      'rocketmail.com', 'google.com', 'optonline.net',
+      'sbcglobal.net', 'aol.com', 'me.com', 'btinternet.com',
+      'charter.net', 'shaw.ca'],
+    secondLevelDomains: ['yahoo', 'hotmail', 'mail', 'live', 'outlook', 'gmx'],
+    topLevelDomains: ['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', 'net.au', 'info', 'biz', 'mil', 'co.jp', 'sg', 'hu', 'uk']
+  };
+  form: FormGroup;
+  email = new FormControl('', Validators.compose([EmailValidators.suggest(this.customOptions)]));
+  constructor(protected _fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.form = this._fb.group({
+      'email': this.email,
+    });
+  }
+
+  addToForm(email) {
+    this.form.get('email').setValue(email);
+  }
+}

examples/src/app/items.ts

@@ -71,6 +71,14 @@ export const email: Validator[] = [
     formTS: require('!raw-loader!./email-validator/form/email/form-email.component'),
     formHTML: require('!raw-loader!./email-validator/form/email/form-email.component.html'),
     hint: '(follows the <a href="https://www.w3.org/TR/html5.html#valid-e-mail-address">HTML5</a> rules)',
+  },
+  {
+    name: 'suggest',
+    reactiveformTS: require('!raw-loader!./email-validator/reactive-form/suggest/reactive-form-email-suggest.component'),
+    reactiveformHTML: require('!raw-loader!./email-validator/reactive-form/suggest/reactive-form-email-suggest.component.html'),
+    formTS: require('!raw-loader!./email-validator/form/suggest/form-email-suggest.component'),
+    formHTML: require('!raw-loader!./email-validator/form/suggest/form-email-suggest.component.html'),
+    hint: '(thanks to <a href="https://github.com/mailcheck/mailcheck">mailcheck</a>)',
   }
 ];
 
@@ -198,10 +206,10 @@ export const creditcards: Validator[] = [
 ];
 
 export const items: Items[] = [
-  {linkPrefix: '/email/', validators: email, name: 'Email'},
-  {linkPrefix: '/password/', validators: password, name: 'Password'},
-  {linkPrefix: '/equal-to/', validators: equalTo, name: 'Equal To'},
-  {linkPrefix: '/creditcard/', validators: creditcards, name: 'Creditcards'},
-  {linkPrefix: '/universal/', validators: universal, name: 'Universal'}
+  { linkPrefix: '/email/', validators: email, name: 'Email' },
+  { linkPrefix: '/password/', validators: password, name: 'Password' },
+  { linkPrefix: '/equal-to/', validators: equalTo, name: 'Equal To' },
+  { linkPrefix: '/creditcard/', validators: creditcards, name: 'Creditcards' },
+  { linkPrefix: '/universal/', validators: universal, name: 'Universal' }
 ];
 

examples/src/app/util/codeviewer/codeviewer.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-//import * as hljs from 'highlight.js';
+// import * as hljs from 'highlight.js';
 
 @Component({
   selector: 'app-codeviewer',
@@ -10,8 +10,4 @@ export class CodeviewerComponent {
 
   @Input() html: any;
   @Input() tsCode: any;
-
-  constructor() {
-    //hljs.initHighlighting();
-  }
 }

examples/src/styles.css

@@ -41,4 +41,9 @@ body {
     min-height: 100%;
     width: 100%;
     min-width: 100%;
+}
+
+.clickable {
+    cursor: pointer;
+    text-decoration: underline;
 }