如何动态命名模板引用变量？

Question

我的模板中有很多大致遵循这种结构的样板代码。

<div class="form-group col-lg-6"
     [ngClass]="{'has-error': errors?.startDate || !startDate.valid}">
    <label>Start Date</label>
    <input class="form-control"
           [(ngModel)]="currentEntity.startDate"
           #startDate="ngModel" name="startDate"
           required />
    <small *ngIf="!startDate.valid" class="help-block">
        Start Date Is Required
    </small>
    <small *ngIf="errors?.startDate" class="help-block">
        {{errors.startDate}}
    </small>
</div>

第二个错误块用于任何返回的服务器验证。

我希望制定一个类似于 <validatedInput [inputName] = "startDate" /> 的指令，并替换每个属性中的关键元素。无论如何动态改变#startDate="ngModel"到#{{inputName}}="ngModel"之类的东西。 ngIf 也必须动态设置。

我是运行 "@angular/forms": "0.1.1".

Answer 1

正如 Günter 指出的那样，模板引用变量是静态的。但是，使用 Angular 2 formbuilder，您可能不再需要它们。

在您的组件中，您可以像这样创建表单组：（注意：需要将 formbuilder 注入到您的组件构造函数中。）

this.myForm = this.formBuilder.group
({
    "startDate": [currentEntity.startDate, Validators.required],
    ...
});

并将您的 html 修改为如下内容：

<div class="form-group col-lg-6" [ngClass]="{'has-error': errors?.startDate || !startDate.valid}">
      <label>Start Date</label>
      <input class="form-control" [formControl]="myForm.controls['startDate']" name="startDate" />
      <small *ngIf="!myForm.controls['startDate'].valid" class="help-block">
       Start Date Is Required
       </small>
    ...

我在这里使用 RC4 中的表单语法。此外，您可以遍历 FormGroup 数组并通过 *ngFor 创建多个此类控件。（为此，您可能需要一个临时数组，用于从 FormGroup 中提取相关信息）。

FormGroups的另一个优点是它们的元素是Observables，这让你可以做各种有趣的事情。

如何动态命名模板引用变量？

How can I dynamically name a template reference variable?

angular2-template

angular