角度2:从ngFor动态生成的输入中检索数据 [英] Angular 2: retreive data from a dynamic generated input by ngFor

问题描述

我正在使用ngFor从数组生成一些input="text"，我需要获取用户在这些inputs中插入的信息，并通过按钮将其发送给函数.我的代码是下一个.谢谢您事先的帮助.

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>

如您所见，我是通过我拥有的服务生成inputs的，它们将有所不同，并且取决于ss-multiselect-dropdown标记内的select阵营的组合

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

推荐答案

我建议您将其设置为表格，在其中可以实际访问值.在此示例中，我只是指出表单"的输入部分，因为据我了解，这就是您要访问值的部分.但是，您只需将所需的代码包装在表单标签中，就可以了.所以，像这样:

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>

如您所见，我已经修改了表单中的name.为了能够在表单中使用ngFor来实际提取所有单独的值，每个名称都必须是唯一的.因此，我添加了输入的索引以将它们彼此分开:name="y.originalField-{{i}}"否则，您最终在所有字段中只会得到一个相同的值.

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.

然后使用按钮，您只需使用myForm.value传递formvalues并使用您的值做任何您想做的事！

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>

希望这会有所帮助！

这篇关于角度2:从ngFor动态生成的输入中检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！