Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add more input fields using a button - Angular 2 dynamic forms

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've made something that works, but it's clunky 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 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 in dynamic-form.component.html but I'd like it to be in dynamic-form-question.component.ts instead. Is this possible?

like image 761
A. L Avatar asked Dec 21 '16 06:12

A. L


2 Answers

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);
    }

Begin and close your HTML with:

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

For creating and removing dynamic fields to your 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 "ADD" link

<div><a (click)="addLink()"></a></div>
like image 72
Amit kumar Avatar answered Nov 07 '22 18:11

Amit kumar


i went through a very useful blog post and that worked fine. dynamically add rows in reactive forms angular 6. Comment for any sort of doubts in the code

like image 41
Akshay Antony Avatar answered Nov 07 '22 19:11

Akshay Antony