在angular 2最新版本中使用form builder进行电子邮件验证

使用angular 2最新版本中的模型驱动表单发送电子邮件进行验证。请给出angular 2的最新版本示例。

来自Cory Rylan的一篇博文：

验证服务：

//Original version created by Cory Rylan: https://coryrylan.com/blog/angular-2-form-builder-and-validation-management
import { IsValidDate } from '../helpers/date.helper'


export class ValidationService {
    static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
        let config = {
            'required': 'Required',
            'invalidNumberField': 'Only numbers allowed',
            'invalidDateField': 'Not a valid date',
            'invalidCreditCard': 'Is invalid credit card number',
            'invalidEmailAddress': 'Invalid email address',
            'invalidPassword': 'Invalid password. Password must be at least 6 characters long, and contain a number.',
            'invalidPasswords': 'Invalid passwords. Passwords must match.',
            'minlength': `Minimum length ${validatorValue.requiredLength}`
        };

        // console.log(" config = " + JSON.stringify(config));
        // console.log(" validator name: " + validatorName);
        // console.log(" config = req " + JSON.stringify(config["required"]));
        // console.log(" config = nan " + JSON.stringify(config["invalidNumberField"]));
        return config[validatorName];
    }

    static numberFieldValidator(control) {
        // if (control.value.match(/^([0-9]|[0-9][0-9]|[1-9][0-9][0-9])$/)) {
        //     return null;
        // } else {
        //     return { 'invalidNumberField': true };
        // }

        return null;
    }

    static dateFieldValidator(control) {
        var e: boolean;

        if (IsValidDate(control.value)) {
            return null;
        } else {
            return { 'invalidDateField': true };
        }
    }

    static creditCardValidator(control) {
        // Visa, MasterCard, American Express, Diners Club, Discover, JCB
        if (control.value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/)) {
            return null;
        } else {
            return { 'invalidCreditCard': true };
        }
    }

    static emailValidator(control) {
        // RFC 2822 compliant regex
        if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
            return null;
        } else {
            return { 'invalidEmailAddress': true };
        }
    }

    static passwordValidator(control) {
        // {6,100}           - Assert password is between 6 and 100 characters
        // (?=.*[0-9])       - Assert a string has at least one number
        if (control.value.match(/^(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{6,100}$/)) {
            return null;
        } else {
            return { 'invalidPassword': true };
        }
    }

    static passwordCompareValidator(fg) {
        if (fg.value.password === fg.value.confirmPassword) {
            return null;
        } else {
            return { 'invalidPasswords': true };
        }
    }
}

错误组件：

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from '../services/validation.service';

@Component({
  selector: 'kg-errorMessages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ErrorMessagesComponent {
  @Input() control: FormControl;
  @Input() name: string;

  constructor() { }

  get errorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }
}

从'@angular/core'导入{Component，Input}；
从'@angular/forms'导入{FormControl}；
从“../services/validation.service”导入{ValidationService}；
@组成部分({
选择器：“kg错误消息”，
模板：`{errorMessage}}`
})
导出类ErrorMessagesComponent{
@Input（）控件：FormControl；
@Input（）名称：string；
构造函数（）{}
获取错误消息（）{
for（在此.control.errors中设置propertyName）{
if（this.control.errors.hasOwnProperty（propertyName）&&this.control.touch）{
返回ValidationService.getValidatorErrorMessage（propertyName，this.control.errors[propertyName]）；
}
}
返回null；
}
}

Html用法：

  <div class="ui raised segment">
        <form [formGroup]="loginForm" novalidate (ngSubmit)="onSubmit()" class="ui form">
          <div class="ui-grid ui-grid-responsive ui-grid-pad">
            <div class="ui-grid-row form-group">
              <div class="ui-grid-col-3 labelDiv">
                <label class="ui-widget labelCheckbox">Email Address:</label>
              </div>
              <div class="ui-grid-col-9">
                <input type="text" size="15" pInputText class="form-control" formControlName="email" autofocus/>
                <kg-errorMessages class="uiMessage" [control]="loginForm.controls.email"></kg-errorMessages>
              </div>
            </div>

            <div class="ui-grid-row form-group">
              <div class="ui-grid-col-3 labelDiv">
                <label class="ui-widget labelCheckbox">Password:</label>
              </div>
              <div class="ui-grid-col-9">
                <input type="password" size="15" pInputText class="form-control" formControlName="password" />
                <kg-errorMessages class="uiMessage" [control]="loginForm.controls.password"></kg-errorMessages>
              </div>
            </div>
          </div>

电邮地址：
密码：

验证数据驱动电子邮件的最简单方法（在TS文件中定义）：

对于模板驱动（在HTML文件中定义）：

电子邮件

。/helpers/date.helper此项不包括工作正常谢谢请给出确认密码和手机号码的示例

  'email': ['',[Validators.required,Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")]], 

<div class="form-group">
      <label for="email"> Email</label>
      <input type="text"
             id="email"
             class="form-control"
             ngModel
             name="email"
             required            
             pattern=" [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
      ></div>