Angular 2：从 ngFor 动态生成的输入中检索数据

Question

我使用 ngFor 从数组中生成了一些 input="text"，我需要检索用户在 inputs 中插入的信息并通过按钮发送到函数。我的代码是下一个。感谢您提前提供任何帮助。

    <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，这些将有所不同，并且取决于 select 阵营中的组合 ss-multiselect-dropdown" tags

Answer 1

我建议您将其制作成一个表单，您可以在其中实际访问值。在此示例中，我只是指出了 "form" 的输入部分，因为据我了解，这是您要访问值的部分。但是您可以将所需的代码包装在 form-tags 中，这样就很好了。所以，像这样：

<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}}" 否则你最终会在所有字段中得到一个相同的值。

然后使用按钮，您只需使用 myForm.value 传递表单值，然后随心所欲地使用您的值！

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

希望对您有所帮助！

Answer 2

引用 angular2 中的反应形式 - https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html。

您可以为每个输入创建表单组和表单控件。

Angular 2：从 ngFor 动态生成的输入中检索数据

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

ngfor

angular