如何在Angular4中编写FormBuild for Dynamic输入？

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>

变量问题可以有任何长度，我在这里循环。我不知道如何编写表单构建以在提交后读取数据。请帮助我吗？谢谢。

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文件的更多信息，将很有帮助。