Как добавить дополнительные поля ввода с помощью кнопки — динамические формы Angular 2

Поэтому я использовал руководство здесь: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

Мне нужно добавить дополнительные поля к существующему полю. Я сделал что-то, что работает, но оно неуклюже и сбрасывает форму, когда я нажимаю на него. Код ниже:

В динамической форме.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);
}

В вопросе.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. Это возможно?


angular forms angular2-forms angular2-formbuilder
person A. L    schedule 21.12.2016    source источник

Ответы (3)


arrow_upward
18
arrow_downward

прежде всего

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 с помощью:

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

Для создания и удаления динамических полей в вашей форме используйте этот 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>

И, наконец, ссылка «ДОБАВИТЬ»

<div><a (click)="addLink()"></a></div>
person Amit kumar    schedule 21.12.2016
comment
@Stephen Kuehl Я использовал тот же код в своем проекте. Меня устраивает. Если вы получаете какую-то ошибку, возможно, вы делаете что-то не так. Это рабочий босс, поэтому у него есть голосование. Поделитесь своей ошибкой - person Amit kumar; 31.05.2017
comment
Ошибка: не удается найти элемент управления с путем: «0 -> linkAddress». Эта ошибка указывает на мой html-файл в строке, где начинается ‹div [formGroupName]=i - person Stephen Kuehl; 31.05.2017
comment
для получения полной информации проверьте эту ссылку scotch. io/учебники/ . это поможет вам понять :) - person Amit kumar; 31.05.2017
comment
Вы забыли упомянуть, что вам нужно обернуть HTML в <div formArrayName="addresses"> - person Stephen Kuehl; 31.05.2017
comment
@StephenKuehl, если вы обнаружите, что чего-то не хватает, вы можете отредактировать мой ответ. я приму изменения. это может помочь и другим программистам. - person Amit kumar; 31.05.2017
comment
Он дает массив объектов. Но мне это нужно как значения внутри объекта. Возможно ли это? - person Mr. Sha; 15.06.2017

arrow_upward
2
arrow_downward

я просмотрел очень полезную запись в блоге, и это сработало нормально. динамически добавлять строки в реактивные формы angular 6. Комментарий для любых сомнений в коде

person Akshay Antony    schedule 26.04.2019

arrow_upward
1
arrow_downward

Решение-победитель может быть немного устаревшим. Код для работы с новым синтаксисом ng'6 будет выглядеть примерно так:

контроллер:

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

и с html следующим образом:

<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>
person Michael Lester    schedule 16.09.2018
comment
Здесь я получаю эту ошибку - ОШИБКА TypeError: Невозможно прочитать свойство getFormGroup со значением null в FormGroupName.get [как элемент управления] (forms.js: 1849) - person Techdive; 29.10.2018