Angular 2: retreive data from a dynamic generated input by ngFor

问题

Im generating some input="text" from array using ngFor, I need to retreive that info the user insert in those inputs and send by a button to a function. My code is the next one. Thank you for any help in advance.

    <div class="container">
        <div class="well well-lg row">
          <div class="form-group col-md-12 text-center">
            <label class="col-md-12">Selección de Bucket</label>
            <ss-multiselect-dropdown class="col-md-12" [options]="buckets" [texts]="myTexts" [settings]="mySettings" (click)="selectBuckets(selectedOptions)" [(ngModel)]="selectedOptions"></ss-multiselect-dropdown>
          </div>
          <div *ngIf="inputs!= null">
            <p>{{inputs.name}}</p>
            <div class="form-group col-md-12 text-center" *ngFor="let input of inputs; let i = index">
                <div *ngFor="let y of input">
                  <div *ngIf="y">
                    <label>{{y.name}}</label>
                    <input #test type="text" name="" placeholder="{{y.name}}" [value]="y.originalField" [(ngModel)]="y.originalField">
                  </div>
                </div>
            </div>
          </div>

          <div class="form-group col-md-3 text-center">
            <label>Start Date: </label>
            <dp-day-picker [class.dp-material]="true" [disabled]="false" [required]="true" [(ngModel)]="fi" [config]="datePickerConfig" style="z-index:10"></dp-day-picker>
          </div>
          <div class="form-group col-md-3 text-center">
            <label>End Date: </label>
            <dp-day-picker [class.dp-material]="true" [disabled]="false" [required]="true" [(ngModel)]="ff" [config]="datePickerConfig"></dp-day-picker>
          </div>

          <div class="form-group col-xs-4 text-center">

<!-- HERE IS THE BUTTON I SHOULD SEND THE INFO FROM THE INPUTS -->
<!-- NOTE: ALSO I NEED TO SEND WITH THE START AND END DATE -->

            <button type="button" (click)="search(test)" class="btn btn-block" style="z-index:-100">Buscar</button>
          </div>

        </div>
      </div>

As you see Im generating the inputs from a service I have and those will be different and depends from the combinations in the select camp inside"ss-multiselect-dropdown" tags

回答1:

I suggest that you would make this a form, where you can actually access the values. In this example, I just point out the input part of your "form", because from what I understand, that is the part where you want to access the values. But you can just wrap the code you want inside the form-tags and you're good. So, something like this:

<form novalidate #myForm="ngForm">
  <div *ngFor="let input of inputs; let i = index">
    <div *ngFor="let y of input">
      <div *ngIf="y">
        <label>{{y.name}}</label>
        <input type="text" name="y.originalField-{{i}}" [(ngModel)]="y.originalField">
      </div>
    </div>
  </div>
</form>

As you can see I have modified the name in the form. To be able to use ngFor in form to actually extract all the separate values, every name has to be unique. Therefore I have added the index of the input to separate them from eachother: name="y.originalField-{{i}}" Otherwise you would end up with just one and the same value in all fields.

Then with the button you just pass the formvalues with myForm.value and do whatever you like with your values!

<button (click)="search(myForm.value)">Buscar</button>

Hope this helps!

回答2:

refer the reactive forms in angular2 - https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html.

You can create a formgroup and create formcontrol for each input.

来源：https://stackoverflow.com/questions/41705314/angular-2-retreive-data-from-a-dynamic-generated-input-by-ngfor