Generate unique id value for dynamically created form controls in angular

In this video we will discuss how to generate unique id value for the dynamically created form controls in Angular.

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.

Text version of the video

Slides

Angular 6 Tutorial

Angular 6 Tutorial Text Articles & Slides

Angular, JavaScript, jQuery, Dot Net & SQL Playlists

If you are wondering, why is there a need to generate unique id values

Well, first of all, IDs on an HTML page are meant to be unique. Having duplication IDs is a terrible idea. Although it may work in some cases, it is semantically incorrect to do so.

In our case the application behaves erratically, because of duplicate element IDs. When we click on a label, we expect it's corresponding input element to receive focus, but, in our case, a different element receives focus. To fix this we have to generate unique ID values for the input elements.

[michaelsalazar]

You are the best friend. You should have more visits!!! thank u

[gennadiigomeniuk]

Hi Venkat, is it possible to add a method as FormControl on FormGroup? When we dynamically generate FormGroup and add it to FormArray, we append the "i" variable to the input id so that all dynamically added FormGroups will be unique. This, however, doesn't help a method in the component to find a specific id to perform some work on input field. Let's say count number of characters typed. Can we find dynamically generated ids or add a method to dynamic FormGroup to perform such work? Thanks!!

[alamsetigourikumar]

Hi, Could you please continue the ASP.Net Core Videos which started long back but unfortunately stopped. There are lots of paid and free tutorial on the web but the way you are following is really fantastic.

[im.ben.t]

How can I create unique id if i have a loop inside another loop?Now I have 2 indices.Please help

[rkeusgba]

I'm getting error no value accessories for form control with path txn -> 0 -> txnId what it means I'm trying to loop form array n have formconyrol name on div

[himanshuupreti]

Can you continue how to read these element values in .ts file after click/submit..

[RajeshYadav-eejf]

Sir can you please start with node. Js

[sharvaripawar]

Can we have duplicate formcontrolName??

[Kammo]

It binds or generates the new element but it's not being the different I'd all stay the same id

[robmays]

Error: hi please note <div formArrayName="skills" *ngFor="let skill of let i = index">
[Angular] Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member

[pawanjaiswal]

Sir I want to see you....your voice is very soothing

[nikesh]

The validation for skill inputs are failing after this.

[sivasankarchimata]

Can please make a video how to do angular form validation in side ngFor loop for comments text field


<div class="container" style="width: 100%; height: 100%; ">
<div class="row" style=" margin: 1px; background-color: #fff; border: 2px solid #ada5a5; border-radius: 4px; ">
<!-- ngFor for posts -->
<div class="container" *ngFor="let post of posts; let i = index">
<!-- {{post.user_id}}, {{post.post_id}}, {{post.saved_name}}, {{ post.file_path}} -->
<div class="
row" style="border: 1px solid #e6e6e6;">
<div class="col-md-12 col-md-offset-0" style=" height: auto; ">
<h6> {{post.description}} </h6>
</div>
</div>
<div class="row">
<div class="col-md-12" style="display: block; ">

<form [formGroup]="commentForm" (ngSubmit)="comment_Submit(post.user_id, post.post_id,
commentForm )" name="commentForm{{i}}">
<div class="form-group">
<input type="text" class="form-control" name="comment{{i}}"
id="comment{{i}}" placeholder="Enter comments" spellcheck="true"
style="width:100%; height: auto; border: 1px solid #ada5a5; border-radius: 4px; outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word; "
[ngClass]="{'form-control': true,
'is-invalid': !f.comment.valid,

<!-- <span && f.comment.touched" class="text-danger">Field is required</span> -->
<div && (f.comment.dirty || f.comment.touched)"
class="alert alert-danger"> Comment should be at least 2 characters. </div>
</div>
<!--<textarea name="Text1" cols="40" rows="5"></textarea>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<textarea rows=3 class="form-control form-input" type="text"
<button type="submit" class="btn-sm btn-success"

</form> <!---Form End-->

</div>
</div>

</div>
</div>










export class PostsComponent implements OnInit {
// Set server = 'localhost:3000/';
// apiUrl: string = 'localhost:3000';
users: User[];
user_id: string;
posts: Post[];
files: File[];
post_id: any;
saved_name = [];
tmp_files = [];

likes: Like[];
like_id: number | null ;
like_status: string;
postLikes: any;

comments: Comment[];
comment_text: string;
formsArr = [];
commentForm: FormGroup;

get f() { return this.commentForm.controls; }

constructor(private userService: UserService, private http: HttpClient, private formBuilder: FormBuilder, private router: Router,
private alerts: AlertsService) {

.subscribe(
data => {
this.user_id = data.toString();
this.getPosts(this.user_id);
this.getFiles(this.user_id);
this.get_likes();

this.get_comments();
// this.getPostsWithLikes();
},
error =>
//
);


}

ngOnInit() { }

commentFormValidation() {
// debugger
this.commentForm = this.formBuilder.group({
comment: ['', [Validators.required, Validators.minLength(2)] ]
});
}



// Get user details from DB
getPosts(user_id) {
=> {
this.posts = data;
},
error => {
return console.log(error);
}
);
}

[kristianbertram]

That's not a unique Id, you get Id clashing just by reusing the create-employee component. Just put the input inside the label instead, then you don't need Id's at all