Angular 7: 多个字段，相同的表单控件名称

Question

我有以下表格，其中列出了问题并有一个答案字段。 api 中循环列出的问题，并且所有问题都需要具有相同的字段名称。一切正常，问题是我无法提交除最后一个以外的所有表单值。有什么方法可以为多个字段使用表单控件名称。

move-maker-add-component.ts

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 => {

this.moveMakers = data;

  });
}
onFormSubmit(form:NgForm) {

  this.api.addMoveMaker(form)
    .subscribe(res => {
        this.router.navigate(['/dashboard']);
      }, (err) => {
        console.log(err);
       });
}
}

move-maker-add.component.html

<app-header></app-header>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <!-- partial:partials/_sidebar.html -->
  <app-nav></app-nav>
      <!-- partial -->
      <div class="main-panel">        
        <div class="content-wrapper">

          <div class="row">


            <div class="col-8 grid-margin stretch-card offset-2">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title" style="text-align:center;">{{ 'MOVE_MAKERS' | translate }}</h4>

                  <form class="forms-sample" [formGroup]="moveMakerForm" (ngSubmit)="onFormSubmit(moveMakerForm.value)">

                    <div class="form-group" *ngFor="let moveMaker of moveMakers">
                      <label for="exampleTextarea1">{{moveMaker.question}}</label>
                      <input type="text" class="form-control" formControlName="moveMakerId" id="exampleInputName1" value="{{moveMaker.id}}" >

                      <textarea class="form-control" id="exampleTextarea1" formControlName="answer" rows="4"></textarea>
                    </div>


                   <button class="btn btn-light">{{ 'CANCEL' | translate }}</button>
                    <button type="submit" class="btn btn-gradient-primary mr-2">{{ 'SAVE' | translate }}</button>

                  </form>
                </div>
              </div>
            </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->

        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../../vendors/js/vendor.bundle.base.js"></script>
  <script src="../../vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="../../js/off-canvas.js"></script>
  <script src="../../js/misc.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="../../js/file-upload.js"></script>
  <!-- End custom js for this page-->
  <app-footer></app-footer>

MoveMaker.ts

export class UserMoveMaker {

    answer : any;
    moveMakerId : any;
  }

Answer 1

我通常使用不同的值动态添加 formControlName，然后根据需要在 .ts 文件中添加验证器。在这种情况下，它看起来像这样：

move-maker-add.component.html

  <input type="text" class="form-control" [formControlName]="moveMaker.id" id="exampleInputName1" value="{{moveMaker.id}}" >

move-maker-add-component.ts

getMoveMaker() {
  this.api.getMoveMakers().subscribe(data => {
      this.moveMakers = data;
      this.moveMakers.forEach((moveMaker ) => this.moveMakerForm .addControl(moveMaker.id, new FormControl('', Validators.required)));
  });
}

Answer 2

所做的实现是响应式和模板驱动的混合体。如果你能遵循任何一种方法会更好。

关于响应式表单方法，这可以使用 FormArray 来实现。示例 - https://stackblitz.com/edit/angular-material-editable-table-fazhbc?file=src%2Fapp%2Fapp.component.html

关于模板驱动的表单，替换你的 (ngSubmit)="onFormSubmit(moveMakers)"

Angular 7: 多个字段，相同的表单控件名称

Angular 7 : Multiple fields , same form control name

angular

typescript

angular7

angular-forms