Comment écrire l'entrée FormBuild pour Dynamic dans Angular4?

Question

Ceci est mon fichier .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> 

la question variable peut avoir une longueur et je bouclant DonT here.I savoir comment écrire la construction de formulaire pour lire les données après submission.please me aider? Merci à l'avance.

Answer 1

Si vous utilisez une approche basée sur un modèle, vous devez ajouter ngModel à votre champ de saisie afin de récupérer les données dans votre fichier ts. Cependant cela ne fonctionnera pas puisque vous aurez beaucoup de champs de saisie.

Vous devez d'abord configurer une approche de formulaire réactif dans votre fichier ts.

Ensuite, vous devez obtenir l'index dans votre * ngFor. Chaque FormControl sera nommé d'après cet indice [formControlName]

<div 
      class="form-group" 
      *ngFor="let q of questions; let i = index"> 
      <input type="text" name="question" class="form-control" [formControlName]="i"> 
    </div> 

Mais je suppose beaucoup ici. Il serait utile si vous fournissez plus d'informations sur votre formulaire et votre fichier ts.