Angular 2 - FormControlフィールドをディレクティブに渡す

最近、Angular 2フォーム、特にフォームの検証を行っています。次の3つのファイルは、私のコードの一部です：app.component、app.component.htmlと非表示-valid.directiveAngular 2 - FormControlフィールドをディレクティブに渡す

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/templates/app.component.html', 
    directives: [REACTIVE_FORM_DIRECTIVES], 
    providers: [FormBuilder] 
}) 
export class AppComponent { 
    loginForm: FormGroup; 

    username: FormControl; 
    password: FormControl; 

    constructor(builder: FormBuilder) { 
     this.username = new FormControl('', [ 
      Validators.required, 
      Validators.maxLength(3) 
     ]); 
     this.password = new FormControl('', Validators.required); 

     this.loginForm = builder.group({ 
      username: this.username, 
      password: this.password 
     }); 
    } 

    onSubmit() {} 
}

非表示valid.directive .TS

import { Input, OnInit, Directive, ElementRef, Renderer } from '@angular/core'; 
import { FormControl } from '@angular/forms'; 

@Directive({ 
    selector: '[hide-valid]' 
}) 
export class HideValidDirective { 
    valid: Boolean; 

    @Input() set isValid(property: FormControl) { 
     this.valid = property.untouched || property.valid; 
     this.set(); 
    } 

    constructor(
     private el: ElementRef, 
     private renderer: Renderer) { 
    } 

    set() { 
     if (this.valid) { 
      this.renderer.setElementStyle(this.el.nativeElement, 
       'display', 'none'); 
     } 
    } 
}

app.component.html

この中

<div [hidden]="username.valid || username.untouched"> 
    <span *ngIf="username.hasError('required')">Field is required</span> 
    <span *ngIf="username.hasError('maxlength')">Field is limited to 3 characters.</span> 
</div>

：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> 
    <label for="username">username</label> 
    <input type="text" name="username" id="username" [formControl]="username"> 
    <div [hidden]="username.valid || username.untouched"> 
     <span *ngIf="username.hasError('required')">Field is required</span> 
     <span *ngIf="username.hasError('maxlength')">Field is limited to 3 characters.</span> 
    </div> 
    <button type="submit">log in</button> 
</form>

私は何をしたいのコードのこの部分を交換にある

<div hide-valid isValid="{{ username }}"> <span *ngIf="username.hasError('required')">Field is required</span> <span *ngIf="username.hasError('maxlength')">Field is limited to 3 characters.</span> </div>

しかし、問題は、私は、ユーザー名に任意のプロパティにアクセスすることはできませんです私はこの構文を使用する場合。私のisValid（プロパティ：any）プロパティは、[オブジェクトオブジェクト]として提供されます

私は何を欠席しましたか？私は2番目の構文が最初の解よりもはるかに良く、短くなっていることがわかります。そのため、私はこの指令を使用しています。

出典

2016-09-10 Rares Mardare