How can I associate labels with form fields outside them in Angular?

Let's say I'm creating labels and form fields in a *ngFor loop like this:

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>

(See it on StackBlitz: https://stackblitz.com/edit/angular-ptwq6t)

Is there a way to cleanly associate these "dynamic" labels and inputs with one another? If I do:

<label for="field" >{{item|uppercase}}:</label>

<input id="field" [value]="item"/>

Angular just repeats the for and id attributes verbatim and all labels point to the first input field.

Is there some way to use Angular's component identity, or am I stuck with something like generating a UUID myself, or otherwise guaranteeing uniqueness of the ID myself?

I can't nest the input inside the label because I have to reuse some already implemented CSS that doesn't expect that structure, but would still like the better usability that comes from having a proper label.

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

add a comment |

Let's say I'm creating labels and form fields in a *ngFor loop like this:

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>

(See it on StackBlitz: https://stackblitz.com/edit/angular-ptwq6t)

Is there a way to cleanly associate these "dynamic" labels and inputs with one another? If I do:

<label for="field" >{{item|uppercase}}:</label>

<input id="field" [value]="item"/>

Angular just repeats the for and id attributes verbatim and all labels point to the first input field.

Is there some way to use Angular's component identity, or am I stuck with something like generating a UUID myself, or otherwise guaranteeing uniqueness of the ID myself?

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

add a comment |

Let's say I'm creating labels and form fields in a *ngFor loop like this:

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>

(See it on StackBlitz: https://stackblitz.com/edit/angular-ptwq6t)

Is there a way to cleanly associate these "dynamic" labels and inputs with one another? If I do:

<label for="field" >{{item|uppercase}}:</label>

<input id="field" [value]="item"/>

Angular just repeats the for and id attributes verbatim and all labels point to the first input field.

Is there some way to use Angular's component identity, or am I stuck with something like generating a UUID myself, or otherwise guaranteeing uniqueness of the ID myself?

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

Let's say I'm creating labels and form fields in a *ngFor loop like this:

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>

(See it on StackBlitz: https://stackblitz.com/edit/angular-ptwq6t)

Is there a way to cleanly associate these "dynamic" labels and inputs with one another? If I do:

<label for="field" >{{item|uppercase}}:</label>

<input id="field" [value]="item"/>

Angular just repeats the for and id attributes verbatim and all labels point to the first input field.

Is there some way to use Angular's component identity, or am I stuck with something like generating a UUID myself, or otherwise guaranteeing uniqueness of the ID myself?

javascript angular forms typescript

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

asked Nov 21 '18 at 6:48

millimoose

32.3k762104

add a comment |

2 Answers
2

active

oldest

votes

Given that the items are unique, you could surely do this:

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

<input [id]="item" [value]="item"/>

That way, each id and for would be unique and label would work as required.

Here is the demo.

If you anyway need to generate the unique IDs, take a look at shortid

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

I mean in my dummy example they are but generally I can't guarantee this and components should be self-contained.

– millimoose
Nov 21 '18 at 7:04

shortid looks neat though

– millimoose
Nov 21 '18 at 7:05

Yeah, Because the items were being used as labels themselves, I assumed that they would be unique. Duplicate label in a form does not make sense. About shortid, definitely, I have seen people in react community using it quite extensively

– Anand Undavia
Nov 21 '18 at 7:08

1

I’ll probably go nuts and use it to make our forms submittable with Enter too like god intended

– millimoose
Nov 21 '18 at 7:45

add a comment |

you can try:

 <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>

or use the ngfor index if your items are not unique:

<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

edited Nov 21 '18 at 7:01

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

did you check my answer? what is the problem?

– Fateme Fazli
Nov 21 '18 at 7:09

If I use the component doing this twice on a page the IDs ‘0field’, ‘1field’ will repeat

– millimoose
Nov 21 '18 at 7:44

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406626%2fhow-can-i-associate-labels-with-form-fields-outside-them-in-angular%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Given that the items are unique, you could surely do this:

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

<input [id]="item" [value]="item"/>

That way, each id and for would be unique and label would work as required.

Here is the demo.

If you anyway need to generate the unique IDs, take a look at shortid

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

I mean in my dummy example they are but generally I can't guarantee this and components should be self-contained.

– millimoose
Nov 21 '18 at 7:04

shortid looks neat though

– millimoose
Nov 21 '18 at 7:05

Yeah, Because the items were being used as labels themselves, I assumed that they would be unique. Duplicate label in a form does not make sense. About shortid, definitely, I have seen people in react community using it quite extensively

– Anand Undavia
Nov 21 '18 at 7:08

1

I’ll probably go nuts and use it to make our forms submittable with Enter too like god intended

– millimoose
Nov 21 '18 at 7:45

add a comment |

Given that the items are unique, you could surely do this:

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

<input [id]="item" [value]="item"/>

That way, each id and for would be unique and label would work as required.

Here is the demo.

If you anyway need to generate the unique IDs, take a look at shortid

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

I mean in my dummy example they are but generally I can't guarantee this and components should be self-contained.

– millimoose
Nov 21 '18 at 7:04

shortid looks neat though

– millimoose
Nov 21 '18 at 7:05

Yeah, Because the items were being used as labels themselves, I assumed that they would be unique. Duplicate label in a form does not make sense. About shortid, definitely, I have seen people in react community using it quite extensively

– Anand Undavia
Nov 21 '18 at 7:08

1

I’ll probably go nuts and use it to make our forms submittable with Enter too like god intended

– millimoose
Nov 21 '18 at 7:45

add a comment |

Given that the items are unique, you could surely do this:

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

<input [id]="item" [value]="item"/>

That way, each id and for would be unique and label would work as required.

Here is the demo.

If you anyway need to generate the unique IDs, take a look at shortid

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

Given that the items are unique, you could surely do this:

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

<input [id]="item" [value]="item"/>

That way, each id and for would be unique and label would work as required.

Here is the demo.

If you anyway need to generate the unique IDs, take a look at shortid

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

answered Nov 21 '18 at 6:56

Anand Undavia

1,7261923

I mean in my dummy example they are but generally I can't guarantee this and components should be self-contained.

– millimoose
Nov 21 '18 at 7:04

shortid looks neat though

– millimoose
Nov 21 '18 at 7:05

Yeah, Because the items were being used as labels themselves, I assumed that they would be unique. Duplicate label in a form does not make sense. About shortid, definitely, I have seen people in react community using it quite extensively

– Anand Undavia
Nov 21 '18 at 7:08

1

I’ll probably go nuts and use it to make our forms submittable with Enter too like god intended

– millimoose
Nov 21 '18 at 7:45

add a comment |

I mean in my dummy example they are but generally I can't guarantee this and components should be self-contained.

– millimoose
Nov 21 '18 at 7:04

shortid looks neat though

– millimoose
Nov 21 '18 at 7:05

Yeah, Because the items were being used as labels themselves, I assumed that they would be unique. Duplicate label in a form does not make sense. About shortid, definitely, I have seen people in react community using it quite extensively

– Anand Undavia
Nov 21 '18 at 7:08

1

I’ll probably go nuts and use it to make our forms submittable with Enter too like god intended

– millimoose
Nov 21 '18 at 7:45

I mean in my dummy example they are but generally I can't guarantee this and components should be self-contained.

– millimoose
Nov 21 '18 at 7:04

shortid looks neat though

– millimoose
Nov 21 '18 at 7:05

Yeah, Because the items were being used as labels themselves, I assumed that they would be unique. Duplicate label in a form does not make sense. About shortid, definitely, I have seen people in react community using it quite extensively

– Anand Undavia
Nov 21 '18 at 7:08

I’ll probably go nuts and use it to make our forms submittable with Enter too like god intended

– millimoose
Nov 21 '18 at 7:45

add a comment |

you can try:

 <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>

or use the ngfor index if your items are not unique:

<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

edited Nov 21 '18 at 7:01

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

did you check my answer? what is the problem?

– Fateme Fazli
Nov 21 '18 at 7:09

If I use the component doing this twice on a page the IDs ‘0field’, ‘1field’ will repeat

– millimoose
Nov 21 '18 at 7:44

add a comment |

you can try:

 <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>

or use the ngfor index if your items are not unique:

<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

edited Nov 21 '18 at 7:01

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

did you check my answer? what is the problem?

– Fateme Fazli
Nov 21 '18 at 7:09

If I use the component doing this twice on a page the IDs ‘0field’, ‘1field’ will repeat

– millimoose
Nov 21 '18 at 7:44

add a comment |

you can try:

 <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>

or use the ngfor index if your items are not unique:

<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

edited Nov 21 '18 at 7:01

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

you can try:

 <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>

or use the ngfor index if your items are not unique:

<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

edited Nov 21 '18 at 7:01

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

edited Nov 21 '18 at 7:01

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

answered Nov 21 '18 at 6:55

Fateme Fazli

4,5171827

did you check my answer? what is the problem?

– Fateme Fazli
Nov 21 '18 at 7:09

If I use the component doing this twice on a page the IDs ‘0field’, ‘1field’ will repeat

– millimoose
Nov 21 '18 at 7:44

add a comment |

did you check my answer? what is the problem?

– Fateme Fazli
Nov 21 '18 at 7:09

If I use the component doing this twice on a page the IDs ‘0field’, ‘1field’ will repeat

– millimoose
Nov 21 '18 at 7:44

did you check my answer? what is the problem?

– Fateme Fazli
Nov 21 '18 at 7:09

If I use the component doing this twice on a page the IDs ‘0field’, ‘1field’ will repeat

– millimoose
Nov 21 '18 at 7:44

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu