如何在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文件的更多信息，將很有幫助。