代码之家 › 专栏 › 技术社区 › millimoose Tomasz Nurkiewicz

如何将标签与它们外部的表单域以角度关联?

typescript forms angular javascript

millimoose Tomasz Nurkiewicz · 技术社区 · 6 年前

假设我在一个*ngfor循环中创建标签和表单字段,如下所示:

应用组件.ts

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

app.component.html(应用程序组件.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"/>

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

是否有一些方法可以使用Angular的组件标识,或者我是否坚持要生成一个UUID,或者保证ID的唯一性?

我不能将输入嵌套在标签中,因为我必须重用一些已经实现的CSS,这些CSS并不期望这种结构,但仍然希望拥有一个合适的标签,从而获得更好的可用性。

2 回复 | 直到 6 年前

Anand Undavia 6 年前

鉴于 items 是独一无二的,你当然可以这样做:

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

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

这里是 demo .

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

Lia 6 年前

你可以试试:

 <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