Erstellen einer Liste von Textfeldern in Angular 4

Question

Ich habe ein Array-Objekt, das die Eingabe aus dem Textfeld bezieht. Allerdings möchte ich das Textfeld auf eine nette Weise gestalten, es zeigt nur ein Textfeld mit einem "+" - Knopf daneben. Erst wenn es gefüllt ist und der Benutzer auf die Schaltfläche klickt, wird unter dem vorherigen Textfeld ein weiteres Textfeld angezeigt und so weiter.

Gibt es eine Möglichkeit, das in Angular 4 zu erreichen?

EDIT: Modell Probe

export class Book{ 
    constructor(
     public id: number, 
     public title: string, 
     public author: Array<string>){} 
} 

Ich möchte es json Wert wie diese haben:

{"id": 1, 
    "title": "Book A", 
    "author": ["personA", "personB", "personC"] 
    } 

Answer 1

Sie können es tun, indem simpliest Weise mit ngModel -Formen oder wenig schwierig Weg mit RectiveForms mit FormArray.

Mehr über ReactiveForms finden Sie hier: https://angular.io/guide/reactive-forms

Hier ist ein einfaches Beispiel für die Lösung mit ngModel einem here ist ein funktionierendes Beispiel:

Schritt 1: Declate ein Array von Typ TextField-

editAuthors: any[] = []; 

Schritt 2: Konvertieren Sie Ihre Autoren-Array

Füllen Sie das neue editAuthors-Array, das Sie für die Erstellung von Formularelementen benötigen.

Schritt 3: Funktion für Sie Add-Taste

addNewTextField(index: number) { 
    const newTextField: TextField = { 
     key: 'textfield' + index, 
     value: '' 
    } 
    this.textfields.push(newTextField); 
    } 

Hier können Sie Standardwert fot neue Textfelder festlegen.

Schritt 4: Formular senden

In diesem Schritt sollten Sie Werte von editAuthors-Array erhalten, und drücken Sie diese zu Ihrem bookModel.authors-Array.

showModel() { 
    this.editAuthors.forEach((author, index) => { 
     this.bookModel.authors[index] = author.value; 
    }); 
    // do something with new model 
    } 

Schritt 5: Vorlage

<div> 
    <label>Book Tiitle</label> 
    <input type="text" name="bookTitle" [(ngModel)]="bookModel.title" /> 
    </div> 

    <div *ngFor="let author of editAuthors;"> 
    <label>Author</label> 
    <input type="text" [(ngModel)]="author.value" [name]="author.key" /> 
    </div> 

    <button (click)="addNewAuthor()">Add new Author</button> 
    <button type="submit" (click)="showModel()">Submit</button> 

Iterate durch editAuthors. Dann erstellen Sie inputs mit name -Attribut und [(ngModel)]. Verwenden Sie author.value für das Binden von Daten, um Elemente zu bilden. Mit author.key hinzufügen einzigartige name -Attribute.

Full TS-Datei

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 

    bookModel = { 
    id: 1, 
    title: 'Book 1', 
    authors: [ 
     'Author 1', 
     'Author 2', 
     'Author 3' 
    ] 
    }; 

    editAuthors: any[] = []; 

    ngOnInit() { 
    this.bookModel.authors.forEach((author, index) => { 
     this.editAuthors.push({ key: 'author'+index, value: author }); 
    }); 
    } 

    addNewAuthor() { 
    this.editAuthors.push({ key: 'author'+this.editAuthors.length+1, value: '' }); 
    } 

    showModel() { 
    this.editAuthors.forEach((author, index) => { 
     this.bookModel.authors[index] = author.value; 
    }); 
    console.log(this.bookModel); 
    } 

}