add custom validator

Author: Mavlarn

app/app.module.ts

@@ -10,11 +10,12 @@ import 'rxjs/add/operator/distinctUntilChanged';
 import { AppComponent } from './app.component';
 import { TemplateFormsComponent } from './template-forms/template-forms.component';
 import { ReactiveFormsComponent } from './reactive-forms/reactive-forms.component';
+import { MobileValidator } from './validators/mobile.validator';
 import { routes } from './app.routes';
 
 @NgModule({
     imports:        [BrowserModule, FormsModule, ReactiveFormsModule, RouterModule.forRoot(routes)],
-    declarations:   [AppComponent, TemplateFormsComponent, ReactiveFormsComponent],
+    declarations:   [AppComponent, TemplateFormsComponent, ReactiveFormsComponent, MobileValidator],
     bootstrap:      [AppComponent]
 })
 export class AppModule {}

app/reactive-forms/reactive-forms.component.html

@@ -28,6 +28,7 @@
                 <div [hidden]="userForm.controls.mobile.valid || userForm.controls.mobile.pristine" class="alert alert-danger">
                     <p *ngIf="userForm.controls.mobile.errors?.minlength || userForm.controls.mobile.errors?.maxlength">电话长度必须为11</p>
                     <p *ngIf="userForm.controls.mobile.errors?.required">必须输入电话</p>
+                    <p *ngIf="userForm.controls.mobile.errors?.validateMobile">电话号码格式不正确</p>
                 </div>
             </div>
         </div>

app/reactive-forms/reactive-forms.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
 
+import { validateMobile } from '../validators/mobile.validator';
+
 @Component({
     selector: 'reactive-form',
     templateUrl: 'app/reactive-forms/reactive-forms.component.html',
@@ -16,7 +18,7 @@ export class ReactiveFormsComponent implements OnInit {
     ngOnInit() {
         this.userForm = this.formBuilder.group({
             name: ['张三', [Validators.required, Validators.minLength(3)]],
-            mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11)]],
+            mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]],
             address: this.formBuilder.group({
                 city: ['北京', Validators.required],
                 street: ['朝阳望京...', Validators.required]

app/template-forms/template-forms.component.html

@@ -23,13 +23,14 @@
         <div class="form-group">
             <label class="col-sm-2 control-label">电话:</label>
             <div class="col-sm-10">
-                <input class="form-control" type="text" name="mobile" [ngModel]="user.mobile" required minlength="11" maxlength="11">
+                <input class="form-control" type="text" name="mobile" [ngModel]="user.mobile" required minlength="11" maxlength="11" validateMobile>
                 <span *ngIf="userForm.controls.mobile?.pristine" class="label label-primary">未修改</span>
                 <span *ngIf="userForm.controls.mobile?.dirty" class="label label-warning">已修改</span>
                 <span *ngIf="userForm.controls.mobile?.valid" class="label label-success">有效</span>
                 <div [hidden]="userForm.controls.mobile?.valid || userForm.controls.mobile?.pristine" class="alert alert-danger">
                     <p *ngIf="userForm.controls.mobile?.errors?.minlength">电话长度必须为11</p>
                     <p *ngIf="userForm.controls.mobile?.errors?.required">必须输入电话</p>
+                    <p *ngIf="userForm.controls.mobile?.errors?.validateMobile">电话号码格式不正确</p>
                 </div>
             </div>
         </div>

app/template-forms/template-forms.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import {NgForm} from '@angular/forms';
 
+import { MobileValidator } from '../validators/mobile.validator';
+
 @Component({
     selector: 'template-form',
     templateUrl: 'app/template-forms/template-forms.component.html',

app/validators/mobile.validator.ts

@@ -0,0 +1,18 @@
+import { FormControl, NG_VALIDATORS } from '@angular/forms';
+import { Directive } from '@angular/core';
+
+export function validateMobile(c: FormControl) {
+    let MOBILE_REGEXP = /^1[0-9]{10,10}$/;
+
+    return MOBILE_REGEXP.test(c.value) ? null : {
+        validateMobile: {valid: false}
+    }
+}
+
+@Directive({
+    selector: '[validateMobile][ngModel]',
+    providers: [
+        { provide: NG_VALIDATORS, useValue: validateMobile, multi: true }
+    ]
+})
+export class MobileValidator {}