Imagine a scenario where labels and form fields are being created in a *ngFor loop, as shown below:
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>
(View live example on StackBlitz: https://stackblitz.com/edit/angular-ptwq6t)
Is there an efficient way to link these "dynamic" labels with their respective inputs? When trying:
<label for="field" >{{item|uppercase}}:</label>
<input id="field" [value]="item"/>
Angular simply duplicates the for and id attributes, causing all labels to point to the first input field.
Is there a method to utilize Angular's component identity, or is one required to develop a unique identifier manually, ensuring uniqueness of the ID?
The limitation of not being able to nest the input within the label exists due to CSS restrictions that prevent this structure alteration. However, the desire for improved usability through proper labeling remains.