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

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

1 个答案: