Jak dynamicznie tworzyć wiele wejść, a następnie uzyskać ich wartości w Angular 2?

Question

Używam kątowa 2.

Chcę dynamicznie tworzyć wiele wejść, a następnie dostarczenie sposobów, aby ich wartości za pomocą [(ngModel)]="input1" lub inne sposoby:

Myślałem o użyciu [hidden], ale odkąd don” t znać dokładną liczbę wejść, które użytkownik chce, więc zapytałem o to, w jaki sposób mogę dynamicznie tworzyć dane wejściowe.

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. 
} 

Dzięki

Answer 1

Utwórz tablicę obiektów. Naciśnij na tablicę, gdy chcesz wprowadzić nowe wejście. Użyj NgFor, aby wygenerować elementy formularza.

@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

Można użyć addControl na obiekcie Kształt:

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

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