How to add additional input fields using the button - Angular 2 dynamic forms

Question

So I used the guide here: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

I need to add more fields to an existing field. I did something that works, but it is awkward and it resets the form when I hit it. Code below:

In dynamic-form.component.ts:

add_textbox() { this.questions.push(this.questionService.create_textbox({key: "test", label: "Test"})); console.log(this.questions); this.form = this.qcs.toFormGroup(this.questions); } 

In the question .service.ts

 create_textbox({key, value, label = '', order = 1, type = "text", description = "", help = ""}: {key?: any, value?: any, label?: any, order?: any, type?: any, description?: any, help?: any}) { return new TextboxQuestion({ key, label, value, order, description, type }); } 

My button is also located in dynamic-form.component.html , but I would like it to be in dynamic-form-question.component.ts . Is it possible?

Answer 1

first of all

 import { FormGroup,FormArray,FormBuilder,Validators } from '@angular/forms'; 

then

  addForm: FormGroup; // form group instance constructor(private formBuilder: FormBuilder) {} ngOnInit() { // *** this is code for adding invoice details *** this.addForm = this.formBuilder.group({ invoice_no: ['', Validators.required], file_no: ['', Validators.required], description: ['', Validators.required], linktodrive: this.formBuilder.array([ this.initLink(), ]) }); } initLink() { return this.formBuilder.group({ linkAddress: ['', Validators.required] }); } addLink() { const control = < FormArray > this.addForm.controls['linktodrive']; control.push(this.initLink()); } removeLink(i: number) { const control = < FormArray > this.addForm.controls['linktodrive']; control.removeAt(i); } 

Start and close your HTML:

<div formArrayName="linktodrive"></div>

To create and delete dynamic fields in a form, use this html:

 <div *ngFor="let address of addForm.controls.linktodrive.controls; let i=index"> <div> <span>Link {{i + 1}}</span> <span *ngIf="addForm.controls.linktodrive.controls.length > 1"><a (click)="removeLink(i)">REMOVE</a></span> </div> <!-- Angular assigns array index as group name by default 0, 1, 2, ... --> <div [formGroupName]="i"> <input type="text" placeholder="Enter Link" formControlName="linkAddress"> </div> </div> 

And finally, the link "ADD"

 <div><a (click)="addLink()"></a></div> 

Answer 2

The winning solution may be a bit outdated. The code for working with the new ng'6 syntax will look something like this:

controller:

 form = this.fb.group({ title: ['New Project Name'], tasks: this.fb.group({ title: ['Task title XX'], content: ['What is this about'], **subtasks: this.fb.array([this.initTask()]),** points: ['5'], hints: ['No hints'] }) }); constructor(private fb: FormBuilder) {} ngOnInit() {} onSubmit() { console.log(this.form); } initTask() { return this.fb.group({ subtask: ['', Validators.required] }); } get tasksControl () { return this.form.get('tasks') as FormGroup; } get subtaskControl () { return this.tasksControl.get('subtasks') as FormArray; } addLink() { this.subtaskControl.push(this.initTask()); } removeLink(i: number) { this.subtaskControl.removeAt(i); } 

and with HTML like this:

 <div formArrayName="subtasks"> <div *ngFor="let subtask of subtaskControl.controls; let i=index"> <div [formGroupName]="i"> <input type="text" placeholder="Enter Link" formControlName="subtask"> </div> <div> <a class="btn btn-danger btn-sm" (click)="removeLink(i)">REMOVE</a> <a class="btn btn-success btn-sm" (click)="addLink()">Add</a> </div> </div> </div> 

Answer 3

I read a very useful blog post and it worked. dynamically add lines to reactive angular forms 6 . Comment for any doubt in the code