Angular2 自定義表單驗證器的實現方法

import { FormControl } from '@angular/forms';
import { Injectable } from '@angular/core'

export class ValidateBase{
 public static urlValidator(input: FormControl){
 let validateString = "(https?://|WWW|www|ftp://|file://)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[.]+[-A-Za-z0-9+&@#/%=~_|]";

 console.log(input.value);
 //set value 
 let v = input.value;

 if(v!=undefined&&v!="")
 {
 if(v.toLowerCase().match(validateString))
 {
 return null;
 }
 else{
 return {
 isUrl:true
 }
 }
 }
 return null;
 }
}

<form [formGroup]="detailForm" (ngSubmit)="submit()">
 <div>
 <label for="LinkedURL">LinkedURL:</label>
 <input type="LinkedURL" name="LinkedURL" id="LinkedURL" [formControl]="LinkedURL">
 <div class="col-xs-4 col-sm-4" [style.color]="(LinkedURL.touched&&LinkedURL.valid==false)?'#d16e6c':'green'" [hidden]="LinkedURL.untouched">
 <div [hidden]="!LinkedURL.hasError('maxlength')">LinkedURL can not be greater than 250 characters.</div>
 <div [hidden]="!LinkedURL.hasError('isUrl')">LinkedURL is not an url.</div>
 <div [hidden]="!LinkedURL.hasError('required')">Required field.</div>
 <!--Success!-->
 <div [style.color]="'green'" [hidden]="!LinkedURL.valid">Validate success!</div>
 </div>
 </div>
 <button type="submit" [disabled]="!detailForm.valid">Log In</button>
</form>

import { ValidateBase } from './../../Validators/Validator.base';
import { Component, OnInit } from '@angular/core';

import {
 FormGroup,
 FormBuilder,
 FormControl,
 Validators
 } from '@angular/forms';

@Component({
 selector: 'validate-component',
 templateUrl: 'validate.component.html'
 })

export class SweepstakesDetailComponent implements OnInit {

 private detailForm: FormGroup;
 private LinkedURL: FormControl;

 ngOnInit(): void {
 this.validateForm();
 }

 private validateForm(){

 this.LinkedURL = new FormControl('',[
 Validators.required,
 Validators.maxLength(250),
 ValidateBase.urlValidator
 ]);

 //form
 this.detailForm = this.formBuilder.group({
 LinkedURL:this.LinkedURL,
 });
 }
}