コンポーネントとして角2のフォーム要素 - 検証does not work

Question

私はこのソリューションを私のプロジェクトに実装しましたhttp://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/ 基本的に、フォーム要素を持つコンポーネントをビルドしてフォームに入れると、問題は私がバリデータをビルドするときですこのバリデータは唯一の「ERROR 1」親フィールドを記述する必要があり、その作品を形成するが、この実装では、それはdoesntの、と私は、ストリーム screenshot from webbrowser

のこの種を取得する駆動定期的なテンプレート内のフィールド

import {Directive, Attribute} from '@angular/core'; 

    import { 
     NG_VALIDATORS, 
     AbstractControl, 
    } from '@angular/forms'; 

    @Directive({ 
     selector: '[validateEqual][ngModel]', 
     providers: [ 
     {provide: NG_VALIDATORS, useExisting: ParentFieldNotNullValidator, multi: true} 
     ] 
    }) 
    export class ParentFieldNotNullValidator { 
     constructor(@Attribute('validateEqual') public validateEqual: string) { 
     } 

     validate(c: AbstractControl): {[key: string]: any} { 
     if (!c.value) { 
      return null; 
     } 
     let e = c.root.get(this.validateEqual); 

     if (e && e.value) { 
      console.log('ERROR 1'); 
      return null; 
     } 
     console.log('error 2'); 
     return {validateError: "message"} }} 

間の依存関係をチェック存在するnullではありません

私は間違っていますか？ 私のhtml：

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)"> 
    <div class="u-space-bottom-8"> 
    <form-input 
     cannotContainSpace 
     minlength="4" 
     required 
     name="username" 
     [(ngModel)]="user.username"> 
     > 
    </form-input> 
    </div> 
    <div class="u-space-bottom-8"> 
    <form-input 
     validateEqual="username" 
     type="password" 
     required 
     name="password" 
     [(ngModel)]="user.password"> 
     > 
    </form-input> 
    </div> 
    <button 
    class="c-btn c-btn--default u-h-10 u-bg-gray-16 u-paint-white-1" 
    type="send" 
    [disabled]="!form.valid" 
    > 
    {{'btn_login'|translate}} 
    </button> 
</form> 

Answer 1

は、私は、問題はデータバインディングとあった、解決策を見つけた今、私のバリデータは次のようになります。

import {Directive, Input} from '@angular/core'; 

import { 
    NG_VALIDATORS, 
    AbstractControl, 
} from '@angular/forms'; 

@Directive({ 
    selector: '[validateEqual][ngModel]', 
    providers: [ 
    {provide: NG_VALIDATORS, useExisting: ParentFieldNotNullValidator, multi: true} 
    ] 
}) 
export class ParentFieldNotNullValidator { 
    constructor() { 
    } 
    @Input('validateEqual') parentValue: string; 
    validate(c: AbstractControl): {[key: string]: any} { 
    if (!c.value) { 
     return null; 
    } 
    if (this.parentValue) { 
     return null; 
    } 
    return {parentFieldNotNull: "message"} 
    } 
} 

とhtmlこの

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)"> 
    <div class="u-space-bottom-8"> 
    <form-input 
     cannotContainSpace 
     minlength="4" 
     required 
     name="username" 
     [(ngModel)]="user.username"> 
     > 
    </form-input> 
    </div> 
    <div class="u-space-bottom-8"> 
    <form-input 
     [validateEqual]="user.username" 
     type="password" 
     required 
     name="password" 
     [(ngModel)]="user.password"> 
     > 
    </form-input> 
    </div> 
    <button 
    class="c-btn c-btn--default u-h-10 u-bg-gray-16 u-paint-white-1" 
    type="wyslij" 
    [disabled]="!form.valid" 
    > 
    {{'btn_login'|translate}} 
    </button> 
</form>