Angular 2获取输入验证状态

我使用angular2创建输入文本组件。如果有效并且需要，我需要在此控件中添加一个类。这是组件：我设置了“有不成功”类，如果需要输入Angular 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>

来源

2016-07-08 Darion Badlydone

预期什么是不工作？另见https://angular.io/docs/ts/latest/guide/forms-deprecated.html –

这是行不通的：form.controls [property] .valid。我需要获得一个输入元素的验证状态。 –

尝试使用find来代替控件form.find [property] .valid – mayur

我认为你不能使用模板驱动的形式的子组件，并把它变成的一种形式的一部分父组件没有在版本RC2之前使用Angular2实现自定义值访问器。

看到这个问题：

Angular 2 custom form input

随着版本RC2 +，我认为这是可能出这样的盒子：

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

来源

2016-07-08 07:51:18

我正在使用RC4。如果我不再需要自定义值访问器，如何将我的组件连接到此属性？ –

Angular 2获取输入验证状态

回答

相关问题