6

我有这个从 list 动态创建column的输入,现在我需要在某些方法发生时获取输入的所有值(想象getAllValues()

      <div *ngFor="let cell of column; let i = index;">
              <!-- Material design input-->
              <md-input type="{{cell.type}}" 
                 value="{{getInputValue(cell)}}" 
                 [placeholder]="cell.label">
              </md-input>
      </div>

获取所有生成的输入值的 angular2 方式是哪一种?

4

2 回答 2

8

最简单的方法是使用 ngForm

<form #myForm="ngForm">
      <div *ngFor="let cell of column; let i = index;">
          <md-input [type]="cell.type" 
             [name]="cell.name"      <!-- Note the 'name' has to be set -->
             [ngModel]="cell.value"
             [placeholder]="cell.label"></md-input>
      </div>
      <a (click)="getAllValues(myForm)">print values</a>
</form>

然后您将可以访问 getAllValues() 函数中的 myForm.form.value 对象。Plnkr:https ://plnkr.co/edit/84mzcNJliMmvszPq3xMm?p=preview

于 2016-11-10T19:19:27.317 回答
0

我所做的是:

              <md-input #input  // NOTICE #input
                          type="{{cell.type}}"
                          value="{{getInputValue(cell) || '--'}}"
                          [placeholder]="cell.label"></md-input>

在组件类中:

export class MyComponent {

    @ViewChildren('input') inputs;


    public updateData(): void {
        console.log(this.inputs) //this will give access to id and values (explore it on google chromes console)
        console.log(this.inputs.toArray().map(x => x.value)) // this gives access to values
    }
}
于 2016-11-10T19:51:29.863 回答