如何在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> 

变量问题可以任意长，我就循环不这儿过得知道怎么写的形式构建阅读submission.please后帮我吗？在此先感谢的数据。

Answer 1

如果您使用模板驱动的方法，您必须将ngModel添加到您的输入字段以检索ts文件中的数据。然而，这将不起作用，因为你会有很多输入字段。

首先，您必须在您的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文件的更多信息，这将有所帮助。