Angular4で動的入力用FormBuildを書く方法は？

Question

これは私の.htmlファイルです。

<div *ngFor="let q of questions"> 
       <div class="row"> 
        <div class="col-md-12 col-12"> 
         <label>{{q.question}}</label> 
        </div> 
        <div class="col-md-12 col-12 q-row"> 
         <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['{{q.id}}'].valid && complexForm.controls['{{q.id}}'].touched}"> 
          <input class="form-control" type="text" [formControl]="complexForm.controls['{{q.id}}']"> 
          <div *ngIf="complexForm.controls['{{q.id}}'].hasError('required') && complexForm.controls['{{q.id}}'].touched" class="invalid">Please provide your name.</div> 
         </div> 
        </div> 
       </div> 
      </div> 

変数質問は任意の長さを持つことができると私はそれがhere.I submission.pleaseが私を助けた後、データを読み取るために、フォームのビルドを作成する方法を知らないルーピングですか？事前に感謝を。

Answer 1

テンプレート駆動アプローチを使用している場合は、tsファイルのデータを取得するために入力フィールドにngModelを追加する必要があります。しかし、これはあなたが多くの入力フィールドを持っているので動作しません。

まず、tsファイルに反応形式のアプローチを設定する必要があります。

あなたは* ngForでインデックスを取得する必要があります。各formControlはこのインデックスの後に[formControlName]という名前で名前が付けられます

<div 
      class="form-group" 
      *ngFor="let q of questions; let i = index"> 
      <input type="text" name="question" class="form-control" [formControlName]="i"> 
    </div> 

しかし、私はここで多くを仮定しています。あなたのフォームとあなたのtsファイルについてのより多くの情報を提供すれば助けになります。