Come creare dinamicamente più input e quindi ottenere i loro valori in Angular 2?

Question

Sto usando angolare 2.

voglio creare dinamicamente più ingressi, e quindi fornire modi per ottenere il loro valore utilizzando [(ngModel)]="input1" o altri modi:

ho pensato di usare [hidden], ma da quando ho don' so il numero esatto di input che l'utente vuole, quindi ho chiesto come posso creare dinamicamente input.

html

<button (click)="addInput()">Add Input</button> 

ts

addInput() { 
    // first time click, add <input type="text" [(ngModel)]="input1"/> 
    // second time click, add <input type="text" [(ngModel)]="input2"/> 
    // third time click, add <input type="text" [(ngModel)]="input3"/> 
    // forth, fifth, etc. 
} 

Grazie

Answer 1

Creare una serie di oggetti. Spingi sull'array quando vuoi un nuovo input. Utilizzare NgFor per generare gli elementi del modulo.

@Component({ 
    selector: 'my-app', 
    template: `<button (click)="addInput()">Add Input</button> 
    <div *ngFor="let input of inputs"> 
    <input [(ngModel)]="input.value"> 
    </div> 
    {{inputs | json}}` 
}) 
export class AppComponent { 
    inputs = [{value: "first"}]; 
    addInput() { 
    this.inputs.push({value: ''}); 
    } 
} 

Plunker

Answer 2

È possibile utilizzare AddControl sul vostro oggetto Form:

this.yourForm.addControl("inputName", new Control); 

https://plnkr.co/edit/MahOzQqkyv613N1NtElF?p=preview