Question

我使用input="text"从数组生成一些ngFor，我需要检索用户在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阵营内的组合＆＃34; ss-multiselect-dropdown＆＃34;标签

Answer 1

我建议您将其设为一个表单，您可以在其中实际访问这些值。在这个例子中，我只是指出“表单”的输入部分，因为根据我的理解，这是你想要访问值的部分。但是你可以在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传递formvalues，并使用您的值做任何您喜欢的事情！

<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中引用反应形式。

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

Angular 2：来自ngFor的动态生成输入的retreive数据

2 个答案: