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”标签中的组合

Answer 1

我建议您将其设为表单，您可以在其中实际访问值。在这个例子中，我只是指出你的“表单”的输入部分，因为据我了解，这是你想要访问值的部分。但是您可以将所需的代码包装在表单标签中，这样就很好了。所以，是这样的：

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

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