角2：ダイナミックに生成された入力からデータを取得します。

Question

を使用して配列からinput="text"を生成すると、ユーザーが挿入する情報を取得し、ボタンを関数に送信する必要があります。私のコードは次のものです。事前に助けていただきありがとうございます。

<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を生成し、それらは、私はあなたがこのAになるだろうことを示唆している「ss-multiselect-dropdown」タグ

Answer 1

内部selectキャンプでの組み合わせが異なると依存になります見ての通りフォームでは、実際に値にアクセスできます。この例では、「フォーム」の入力部分を指摘しています。これは、わかっていることから、値にアクセスしたい部分だからです。しかし、あなたはフォームタグの中にあなたが望むコードをラップするだけでよいです。したがって、次のようなものがあります。

ご覧のとおり、nameをフォームに変更しました。フォーム内でngForを使用して実際にすべての別々の値を抽出できるようにするには、すべての名前を一意にする必要があります。したがって、私は入力のインデックスを追加してお互いから区別します：name="y.originalField-{{i}}"それ以外の場合は、すべてのフィールドで1つの同じ値になります。

ボタンを使用すると、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を作成できます。