Adding input fields dynamically using Form Array in Angular by clicking on a button

Posted by

Dynamically Add Input Fields in Angular

Dynamically Add Input Fields in Angular

Click the button below to add input fields dynamically:

function addInputField() {
var input = document.createElement(‘input’);
input.type = ‘text’;
document.getElementById(‘inputFields’).appendChild(input);
}

0 0 votes
Article Rating
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@hanumanthnadapana5641
5 months ago

Where is add subject functionality can you it also

@sparkiesam8140
5 months ago

Thank you looking for it

@stefanciobanu2933
5 months ago

If you call that studentListArray( ) function inside the ng-for, wouldn't that have a negative effect on the app's performance? cause that function will be called every time the app detects changes in that component. So that will lead to multiple unwanted calls to that function.

@vijaychouhan570
5 months ago

Nice solution was looking for the same

@shubhraneelghosh8651
5 months ago

Thank You so much for showing how FormArray works, but i have a question. I am very new to angular just wanted to know that if the input fields that you have shown are some other "custom input component" like
<app-text-field>
and we are passing controls in
<app-text-field [control]="student_name"></app-text-field>

rather than passing formControlName then how should we go by it.

Also, <app-text-field> TypeScript File is @Input() control: FormControl= new FormControl(' ');

and HTML Goes like
<input type="text" [formControl]="control" />

Thanks In advance 🙂

@user-yy1td6qv3z
5 months ago

thank buddy looking for this

@zulfalutfiah7648
5 months ago

thanks for sharing the knowledge.. but I want to ask. Can you give an example for the backend side?

@vishalchouhan2102
5 months ago

Please upload 2nd part

@rishabhjain5567
5 months ago

Waiting… For second part😊

@ShubhamMandloi-if1yp
5 months ago

When you are uploading 2nd part

@prashantgupta6106
5 months ago

Awesome containt greatfull