Angular 2自定義驗證器如何設置control.valid true？

Question

我有這樣的自定義的驗證：

static isEmail(control:Control):{[key:string]:boolean} { 
    let emailRegExp = new RegExp("^[-a-z0-9~!$%^&*_=+}{'?]+(.[-a-z0-9~!$%^&*_=+}{'?]+)*@([a-z0-9_][-a-z0-9_]*(.[-a-z0-9_]+)*.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}))(:[0-9]{1,5})?$", 'i'); 
    if (control.value.match(emailRegExp)) { 
    return {isEmail: true}; 
    } 
    return {isEmail: false}; 
} 

使用它在組件：

loginForm:ControlGroup; 

constructor(private _router:Router, 
      private _loginService:LoginService, 
      private _formBuilder:FormBuilder) { 
this.loginForm = _formBuilder.group({ 
    email: ['', Validators.compose([ 
    Validators.required, 
    Validators.minLength(8), 
    FormValidationService.isEmail 
    ])], 
    password: ['', Validators.compose([ 
    Validators.required, 
    Validators.minLength(8), 
    Validators.maxLength(30), 
    FormValidationService.isPassword 
    ])] 
}); 
} 

而且模板：

<form id="login-form" role="form" [ngFormModel]="loginForm" (ngSubmit)="onLoginSubmit()"> 
    <div class="form-group"> 
     <label class="control-label" for="loginFormEmail">Email</label> 
     <input type="text" id="loginFormEmail" class="form-control" 
      ngControl="email" #email="ngForm"> 
     <div *ngIf="email.dirty && !email.valid"> 
     <div class="alert alert-danger" role="alert" [hidden]="!email.errors.minlength"> 
      Email field must have more then 8 characters 
     </div> 
     <div class="alert alert-danger" role="alert" [hidden]="email.errors.isEmail"> 
      Email not valid 
     </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="loginFormPassword">Password</label> 
     <input type="password" id="loginFormPassword" class="form-control" 
      ngControl="password" #password="ngForm"> 
     <div *ngIf="password.dirty && !password.valid"> 
     <div class="alert alert-danger" role="alert" [hidden]="!password.errors.minlength"> 
      Password field must have more then 8 characters 
     </div> 
     <div class="alert alert-danger" role="alert" [hidden]="!password.errors.maxlength"> 
      Password field must have no more then 30 characters 
     </div> 
     <div class="alert alert-danger" role="alert" [hidden]="password.errors.isPassword"> 
      Password must meet the following rules: 
      <ul> 
      <li>At least one upper case english letter</li> 
      <li>At least one lower case english letter</li> 
      <li>At least one digit</li> 
      <li>At least one special character</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    <p>If you forgot your password you can <a (click)="toForgot()">reset it</a>.</p> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-primary btn-block" [disabled]="!loginForm.valid">Login</button> 
    </div> 
    </form> 

如果你在截圖看，你可以看到，自定義的驗證返回我的值。但不管它的值如何控制。valid始終爲false，所以形式無效。

我嘗試設置control.valid = true，但本場只有吸氣。

Answer 1

我認爲你需要添加ngControlGroup到包裝元素否則表單不會跟蹤包含輸入元素

<div class="form-group" ngControlGroup="someName"> 

參見NgControlGroup

Answer 2

你跟ngForm和定義在JS在線混合形式定義使用FormBuilder類的代碼。

你應該重構你的輸入定義這種方式使用ngFormControl指令：

<input [ngFomControl]="loginForm.controls.password" .../> 

Answer 3

我找到了答案。當控制值是有效的，你必須在你的自定義驗證返回null：

static isPassword(control:Control):{[key:string]:boolean} { 
    let passwordRegExp = new RegExp("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$"); 
    if (control.value.match(passwordRegExp)) { 
    return null; 
    } 
    return {isPassword: false}; 
}