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

템플릿 기반 접근 방식을 사용하는 경우 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 파일에 대한 추가 정보를 제공하면 도움이됩니다.