Угловое 2 - Поле формы FormControl в директиве

Question

Я играл в последнее время с формами Angular 2, в частности, для проверки формы. Следующие 3 файла являются частью моего кода: app.component, app.component.html и скрывать-valid.directive

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

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

в этом:

<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) свойство появляется как [object Object]

Что я пропустил? Я считаю, что второй синтаксис намного лучше и короче первого решения, поэтому я использую эту директиву.

Answer 1

{{...}} предназначен для интерполяции строк. Он передает каждое значение перед назначением.

Используйте вместо

<div hide-valid [isValid]="username"> 

Вы также можете изменить селектор [isValid], то вы можете сократить свой код

<div [isValid]="username">