Question

我正在使用Angular 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.
}

由于

Answer 1

创建一个对象数组。如果需要新输入，请按下阵列。使用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

Answer 2

您可以在Form对象上使用addControl：

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

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

如何动态创建多个输入，然后可以在Angular 2中获取它们的值？

2 个答案: