title: Angular 7 : Multiple fields , same form control name
body: <p>I have the following form that lists questions and have an answer field. the questions listed by a loop from api and all of them need to have the same field name. Everything works fine, the problem is I can't submit all the form values except the last one. Is there any way to use a form control name for multiple fields.</p>
  
  <p>move-maker-add-component.ts </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
  import { ApiService } from 'src/app/shared/services/api.service';
  import { AuthService } from "src/app/shared/services/auth.service";
  import { Router } from '@angular/router';
  @Component({
    selector: 'app-move-makers-add',
    templateUrl: './move-makers-add.component.html',
    styleUrls: ['./move-makers-add.component.scss']
  })
  export class MoveMakersAddComponent implements OnInit {
  moveMakerForm: FormGroup;
  moveMakerId:any;
  moveMakers:any='';
  answer:any;
  id:string='';
  
  
    constructor(public authService: AuthService,private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }
  
    ngOnInit() {
    this.getMoveMaker();  
    this.moveMakerForm = this.formBuilder.group({
      'moveMakerId' : [null, Validators.required],
  
      'answer' : [null, Validators.required],
  
  
    });
  }
  
  getMoveMaker() {
    this.api.getMoveMakers().subscribe(data =&gt; {
  
  this.moveMakers = data;
  
    });
  }
  onFormSubmit(form:NgForm) {
  
    this.api.addMoveMaker(form)
      .subscribe(res =&gt; {
          this.router.navigate(['/dashboard']);
        }, (err) =&gt; {
          console.log(err);
         });
  }
  }
  </code></pre>
  
  <p>move-maker-add.component.html</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
      &lt;!-- partial --&gt;
      &lt;div class="container-fluid page-body-wrapper"&gt;
        &lt;!-- partial:partials/_sidebar.html --&gt;
    &lt;app-nav&gt;&lt;/app-nav&gt;
        &lt;!-- partial --&gt;
        &lt;div class="main-panel"&gt;        
          &lt;div class="content-wrapper"&gt;
  
            &lt;div class="row"&gt;
  
  
              &lt;div class="col-8 grid-margin stretch-card offset-2"&gt;
                &lt;div class="card"&gt;
                  &lt;div class="card-body"&gt;
                    &lt;h4 class="card-title" style="text-align:center;"&gt;{{ 'MOVE_MAKERS' | translate }}&lt;/h4&gt;
  
                    &lt;form class="forms-sample" [formGroup]="moveMakerForm" (ngSubmit)="onFormSubmit(moveMakerForm.value)"&gt;
  
                      &lt;div class="form-group" *ngFor="let moveMaker of moveMakers"&gt;
                        &lt;label for="exampleTextarea1"&gt;{{moveMaker.question}}&lt;/label&gt;
                        &lt;input type="text" class="form-control" formControlName="moveMakerId" id="exampleInputName1" value="{{moveMaker.id}}" &gt;
  
                        &lt;textarea class="form-control" id="exampleTextarea1" formControlName="answer" rows="4"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
  
  
                     &lt;button class="btn btn-light"&gt;{{ 'CANCEL' | translate }}&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-gradient-primary mr-2"&gt;{{ 'SAVE' | translate }}&lt;/button&gt;
  
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- content-wrapper ends --&gt;
          &lt;!-- partial:../../partials/_footer.html --&gt;
  
          &lt;!-- partial --&gt;
        &lt;/div&gt;
        &lt;!-- main-panel ends --&gt;
      &lt;/div&gt;
      &lt;!-- page-body-wrapper ends --&gt;
    &lt;/div&gt;
    &lt;!-- container-scroller --&gt;
    &lt;!-- plugins:js --&gt;
    &lt;script src="../../vendors/js/vendor.bundle.base.js"&gt;&lt;/script&gt;
    &lt;script src="../../vendors/js/vendor.bundle.addons.js"&gt;&lt;/script&gt;
    &lt;!-- endinject --&gt;
    &lt;!-- inject:js --&gt;
    &lt;script src="../../js/off-canvas.js"&gt;&lt;/script&gt;
    &lt;script src="../../js/misc.js"&gt;&lt;/script&gt;
    &lt;!-- endinject --&gt;
    &lt;!-- Custom js for this page--&gt;
    &lt;script src="../../js/file-upload.js"&gt;&lt;/script&gt;
    &lt;!-- End custom js for this page--&gt;
    &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>MoveMaker.ts</p>
  
  <pre><code>export class UserMoveMaker {
  
      answer : any;
      moveMakerId : any;
    }
  </code></pre>