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;

}

在模板的第一行，我设置了＆＃34; has-success＆＃34; class，如果输入是必需的，但我需要设置它，如果它也有效。 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实现自定义值访问器。

看到这个问题：

Angular 2 custom form input

对于RC2 +版本，我认为它可以像这样开箱即用：

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

Angular 2获得输入验证状态

1 个答案: