时间戳

首页 > 解决方案 > 数组最佳实践中的 Angular 模板驱动表单

angular - 数组最佳实践中的 Angular 模板驱动表单

问题描述

我需要使用模板驱动表单动态生成的表中的多个表单，它的工作方式与我一样，但我不确定它是否正确。

<div *ngFor="let row of rows">
  <form #f="ngForm" (submit)="submit(f)">
    ...
  </form>
</div>

将#f被定义很多次，我想知道这是否会导致问题？我最终可以给出一个动态命名（如果可能的话？），但由于它是这样工作的，我不想让它过于复杂。

标签： angularforms

解决方案

这不会是一个问题，因为每个表单标签都会有不同的上下文。动态创建模板引用变量是不可能的。

如果你不喜欢有模板引用变量，你可以拥有当前表单的索引并使用 ViewChildren 查询它。

template:

<div *ngFor="let row of rows; let i=index">
  <form (submit)="submit(i)">
    ...
  </form>
</div>

Component:

@ViewChildren('div > form') forms: Array<NgForm>;

submit(index: number){
 var currentForm:NgForm = forms[index];
}

推荐阅读