Как динамически создавать несколько входов, а затем получать их значения в Angular 2?

Я использую угловой 2.

Я хочу динамически создавать несколько входов, а затем предоставлять способы получения их значения с помощью [(ngModel)]="input1" или другими способами:

Я думал об использовании [hidden], но поскольку я не знаю точного количества входов, которые хочет пользователь, поэтому я спросил о том, как я могу динамически создавать входы.

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

спасибо

6
angular

2 ответов

создать массив объектов. Нажмите на массив, когда вам нужен новый ввод. Использовать NgFor для создания элементов формы.

@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

8

вы можете использовать addControl для объекта формы:

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

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

2