如何使用按钮添加更多输入字段-Angular 2动态表单 [英] How to add more input fields using a button - Angular 2 dynamic forms

问题描述

所以我在这里使用了指南： https://angular.io /docs/ts/latest/cookbook/dynamic-form.html

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:

在dynamic-form.component.ts中：

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

Inquestion.service.ts

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

我的按钮也位于 dynamic-form.component中。 .html ，但我希望它位于 dynamic-form-question.component.ts 中。

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?

推荐答案

首先

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

然后

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

开始并用以下命令关闭HTML：

Begin and close your HTML with:

< div formArrayName = linktodrive>< / div>

使用以下html创建和删除表单的动态字段：

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>

最后是 ADD链接

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

这篇关于如何使用按钮添加更多输入字段-Angular 2动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！