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}; 
}