My current challenge involves replicating input fields on click of a button. I have a set of input fields where data can be entered, and then I need to add another set of the same fields for additional data. There needs to be a way to remove these replicated fields if they are not needed.
I attempted to implement this functionality in Angular, and here is some sample code and a Plunker link for reference:
template.ts
<div class="card">
<input type="text" id="name" value="" class="form-control">
<label for="form1">Name</label>
<input type="text" id="mobile" value="" class="form-control">
<label for="form1">Mobile</label>
</div>
<button type="button" title="Add" class="btn btn-sm"
(click)="addMore">Add</button>
test.component.ts
export class App {
addMore() {
//function to replicate the form input fields
}
Plunker link: http://plnkr.co/edit/GCCnoMkLynpELwaYX11m?p=preview