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
29 days ago

Where is add subject functionality can you it also

@sparkiesam8140
29 days ago

Thank you looking for it

@stefanciobanu2933
29 days 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
29 days ago

Nice solution was looking for the same

@shubhraneelghosh8651
29 days 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
29 days ago

thank buddy looking for this

@zulfalutfiah7648
29 days ago

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

@vishalchouhan2102
29 days ago

Please upload 2nd part

@rishabhjain5567
29 days ago

Waiting… For second part😊

@ShubhamMandloi-if1yp
29 days ago

When you are uploading 2nd part

@prashantgupta6106
29 days ago

Awesome containt greatfull