wake-up-neo.net

So fügen Sie mithilfe einer Schaltfläche weitere Eingabefelder hinzu - Angular 2 dynamische Formen

Also habe ich die Anleitung hier benutzt: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

Ich muss zu einem vorhandenen Feld weitere Felder hinzufügen. Ich habe etwas gemacht, das funktioniert, aber es ist klobig und setzt die Form zurück, wenn ich darauf stoße. Code unten:

In dynamischer-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 Frage.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
    });
}

Mein Button ist auch in dynamic-form.component.html, aber ich möchte, dass er stattdessen in dynamic-form-question.component.ts ist. Ist das möglich?

6
A. Lau

zuerst 

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

dann 

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

Beginnen Sie und schließen Sie Ihren HTML-Code mit:

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

Zum Erstellen und Entfernen dynamischer Felder in Ihrem Formular verwenden Sie dieses 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>

Und zum Schluss noch den "ADD" -Link

<div><a (click)="addLink()"></a></div>
15
Amit kumar

Die gewinnende Lösung könnte etwas veraltet sein. Der Code, der mit der neuen ng'6-Syntax funktioniert, würde in etwa wie folgt aussehen:

regler:

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

und mit html so:

<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>
0
Michael Lester