如何在 Angular 中将标签与它们之外的表单字段相关联？答案

【问题标题】：How can I associate labels with form fields outside them in Angular?如何在 Angular 中将标签与它们之外的表单字段相关联？
【发布时间】：2018-11-21 06:48:53
【问题描述】：

假设我在 *ngFor 循环中创建标签和表单字段，如下所示：

app.component.ts

export class AppComponent  {
  items = ['aaa', 'bbbbbb', 'ccccccccc']
}

app.component.html

<div class='form'>
  <ng-container *ngFor="let item of items">
    <label>{{item|uppercase}}:</label>
    <input [value]="item"/>
  </ng-container>
</div>

（在 StackBlitz 上查看：https://stackblitz.com/edit/angular-ptwq6t）

有没有一种方法可以清晰地将这些“动态”标签和输入相互关联？如果我这样做：

<label for="field" >{{item|uppercase}}:</label>
<input id="field" [value]="item"/>

Angular 只是逐字重复for 和id 属性，所有标签都指向第一个输入字段。

有什么方法可以使用 Angular 的组件标识，还是我坚持自己生成 UUID，或者自己保证 ID 的唯一性？

我不能将输入嵌套在标签内，因为我必须重用一些已经实现的 CSS，这些 CSS 并不期望这种结构，但仍然希望拥有适当的标签带来更好的可用性。

【问题讨论】：

标签： javascript angular forms typescript

【解决方案1】：

鉴于items 是独一无二的，您当然可以这样做：

<label [for]="item" >{{item|uppercase}}:</label>
<input [id]="item" [value]="item"/>

这样，每个 id 和 for 将是唯一的，并且标签将按要求工作。

这里是demo。

如果您仍然需要生成唯一 ID，请查看 shortid

【讨论】：

我的意思是在我的虚拟示例中它们是，但通常我不能保证这一点，组件应该是独立的。
shortid 看起来很整洁
是的，因为这些项目本身被用作标签，所以我认为它们是独一无二的。表单中的重复标签没有意义。关于shortid，当然，我已经看到 React 社区中的人们非常广泛地使用它
我可能会发疯，并使用它来让我们的表单也可以像上帝一样使用 Enter 提交

【解决方案2】：

你可以试试：

 <div class='form'>
      <ng-container *ngFor="let item of items">
        <label for="{{item}} + 'field'" >{{item|uppercase}}:</label>
        <input id="{{item}} + 'field'" [value]="item"/>
      </ng-container>
 </div>

如果您的项目不是唯一的，则使用 ngfor 索引：

<div class='form'>
  <ng-container *ngFor="let item of items; let i = index">
    <label for="{{i}} + 'field'" >{{item|uppercase}}:</label>
    <input id="{{i}} + 'field'" [value]="item"/>
  </ng-container>
</div>

DEMO

【讨论】：

你检查我的答案了吗？有什么问题？
如果我在一个页面上使用该组件执行此操作两次，则 ID 为“0field”，“1field”将重复