1
我使用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>
预期什么是不工作?另见https://angular.io/docs/ts/latest/guide/forms-deprecated.html –
这是行不通的:form.controls [property] .valid。我需要获得一个输入元素的验证状态。 –
尝试使用find来代替控件form.find [property] .valid – mayur