角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> 

あなたはスクリーンショットを見るとカスタムバリデータは私を返すことがわかります値。しかし、その値の制御にかかわらず、常に無効なので、フォームは無効になります。

私はcontrol.valid = trueを設定しようとしますが、このフィールドはゲッターを持っています。

Answer 1

は、私はあなたがそうでなければ、フォームを含む入力要素

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

参照を追跡しないであろう要素をラップにngControlGroupを追加する必要があると思うもNgControlGroup

Answer 2

あなたJSでngFormと定義との混合インラインフォーム定義コードはFormBuilderクラスを使用しています。私は答えを見つけた

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

Answer 3

：

あなたが入力定義にngFormControlディレクティブを使用するには、この方法をリファクタリングする必要があります。制御値が有効である場合、あなたはあなたのカスタムバリデータで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}; 
}