Angular 7: несколько полей, одно имя элемента управления формы - PullRequest
Новая
       12

Angular 7: несколько полей, одно имя элемента управления формы

0 голосов
/ 30 апреля 2019

У меня есть следующая форма, в которой перечислены вопросы и есть поле для ответов. вопросы, перечисленные в цикле из 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);
       });
}
}

шаг-верстальщик 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;
  }

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

Обычно я добавляю formControlName динамически с различными значениями, а затем добавляю валидаторы в файл .ts , если это необходимо. В этом случае это будет выглядеть так:

шаг-верстальщик add.component.html 

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

шаг-мейкера-адд-component.ts 

getMoveMaker() {
  this.api.getMoveMakers().subscribe(data => {
      this.moveMakers = data;
      this.moveMakers.forEach((moveMaker ) => this.moveMakerForm .addControl(moveMaker.id, new FormControl('', Validators.required)));
  });
}
0 голосов
/ 30 апреля 2019

Реализация представляет собой смесь формы Reactive и Template Driven. Было бы лучше, если бы вы могли следовать любому подходу.

Что касается подхода с реактивной формой, этого можно достичь с помощью FormArray. Пример - https://stackblitz.com/edit/angular-material-editable-table-fazhbc?file=src%2Fapp%2Fapp.component.html

Что касается шаблонно-управляемых форм, замените your (ngSubmit) = "onFormSubmit (moveMakers)"

...