[英]How can I associate labels with form fields outside them in Angular?
假设我正在* ngFor循环中创建标签和表单字段,如下所示:
export class AppComponent {
items = ['aaa', 'bbbbbb', 'ccccccccc']
}
<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并不需要这种结构,但是仍然希望拥有合适的标签能带来更好的可用性。
你可以试试:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.