2016-07-08 2 views
1

Я создаю компонент текста ввода с угловым2. Мне нужно добавить класс в этот элемент управления, если он действителен, и если это необходимо. Это компонент:Угловой 2 получить статус проверки ввода

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> 
+0

Что не работает, как ожидалось? См. Также https://angular.io/docs/ts/latest/guide/forms-deprecated.html –

+0

Это не работает: form.controls [property] .valid. Мне нужно получить динамически статус проверки входного элемента. –

+0

попытайтесь использовать find вместо элементов управления form.find [свойство] .valid – mayur

ответ

1

Я думаю, что вы не можете использовать шаблон инициативе, образуют субкомпонент и сделать его частью формы из родительский компонент без реализации пользовательского адаптера значений с Angular2 до версии RC2.

Смотрите этот вопрос:

С версии RC2 +, я думаю, что это возможно из коробки, как это:

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

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

Смежные вопросы