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，可以让你做各种有趣的事情。

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

1 个答案: