Angular2 get values of dynamically created inputs

Question

I have this input which are created dynamically from list column, now I need to get all values of the inputs when some method occurs( imagine 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>

Which would be the angular2 way of getting the values of all the generated inputs?

Possible to use ViewChildren, if it's part of a form they can be appended to the form programmatically (reactive) or by magic (template driven). — silentsod, Nov 10 '16 at 17:57
@silentsod what would be the best practice? reactuve or magic? — CommonSenseCode, Nov 10 '16 at 17:59
Template driven is more or less in line with the Angular 1 way of doing things, Reactive is heavier code wise but makes unit testing easier. Neither is best practice, template driven is probably a lower overhead approach in terms of learning and actual lines of code. If it's outside of a form then you'll probably want to do a ViewChildren query to grab them all. — silentsod, Nov 10 '16 at 18:02
@siletsod yes they are outside of form, how to grab all values with the ViewChildren is it possible to get value based on let i = index? — CommonSenseCode, Nov 10 '16 at 18:03
If I get time I'll see about ginning up a demo plunker. In the meantime, hopefully the comments will help other prospective responders to produce a solution fitted for your use. — silentsod, Nov 10 '16 at 18:06
The angular-material tag should be removed since this doesn't relate to that library for Angular 1.x. — Splaktar, Jan 05 '17 at 20:40

score 8 · Accepted Answer · answered Nov 10 '16 at 19:19

The easiest way to do it is by using 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>

Then you will have the access to myForm.form.value object in getAllValues() function. Plnkr: https://plnkr.co/edit/84mzcNJliMmvszPq3xMm?p=preview

score 0 · Answer 2 · edited Nov 10 '16 at 20:40

0

What I did is:

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

in component class:

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

edited Nov 10 '16 at 20:40

Logan H

3,383
2
33
50

answered Nov 10 '16 at 19:51

CommonSenseCode

23,522
33
131
186

Template variables can't be used this way when inputs are generated dynamically such as with an **ngFor** statement – Sal Aug 21 '17 at 16:37

Angular2 get values of dynamically created inputs

2 Answers2