角2は入力の検証ステータスを取得します

Question

私はangular2で入力テキストコンポーネントを作成しています。私は、このコントロールにクラスが必要であれば、そのクラスを追加する必要があります。これは、コンポーネントです：入力が必要な場合、私は「持っている - 成功」クラスを設定したテンプレートの最初の行で

import { Component, Input } from "@angular/core"; 
import { NgForm } from '@angular/forms'; 

@Component({ 
    selector: "input-control", 
    template: ` 
     <div [class.has-success]="required" class="form-group form-md-line-input form-md-floating-label"> 
      <input [class.edited]="model[property]" 
       [(ngModel)]="model[property]" 
       [attr.ngControl]="property" 
       [name]="property" 
       type="text" 
       class="form-control" 
       id="{{property}}" 
       value="" 
       [attr.required]="required"> 
      <label [attr.for]="property">{{label}}</label> 
      <span class="help-block">{{description}}</span> 
     </div> 
     ` 
}) 
export class InputControlComponent { 

    @Input() 
    model: any; 

    @Input() 
    property: string; 

    @Input() 
    label: string; 

    @Input() 
    description: string; 

    @Input() 
    required: boolean; 

    @Input() 
    form: NgForm; 

} 

が、私はそれがあまりにも有効だ場合、それを設定する必要があります。 Somethigこのように：

[class.has-success]="required && form.controls[property].valid" 

HTMLはこれです：

<form role="form" *ngIf="active" (ngSubmit)="onSubmit(databaseForm)" #databaseForm="ngForm"> 
    <div class="form-body"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <input-control [model]="model" [property]="'code'" [form]="databaseForm" [label]="'@Localizer["Code"]'" [description]="'@Localizer["InsertCode"]'" [required]="true"></input-control> 
      </div> 
      <div class="col-md-6"> 
       <input-control [model]="model" [property]="'description'" [form]="databaseForm" [label]="'@Localizer["Description"]'" [description]="'@Localizer["InsertDescription"]'"></input-control> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

私はあなたがテンプレート駆動型フォームのサブコンポーネントを使用し、それがの形の一部で作ることができないと思いますバージョンRC2より前のAngular2でカスタム値アクセサを実装することなく、親コンポーネントを作成できます。

は、この質問を参照してください：バージョンRC2の+付き

• Angular 2 custom form input

を、私はそれがこのような箱の外に可能だと思う：

<form #databaseForm="ngForm"> 
    <input-control name="code" [ngModelOptions]="{name: 'code'}" 
       [(ngModel)]="model.code"/> 
</form>