表单提交中返回了错误的值

Question

我正在创建多个表单组，但在以一个表单提交时，它返回的是最后输入的表单的值。

export class ExpansionOverviewExample {
  panelOpenState = false;
  tables: string[] = ['one', 'two', 'three', 'four', 'five'];

  formData = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });

  onConvertButtonClick() {
    alert(this.formData.value['firstName']);
    alert(this.formData.value['lastName']);
    console.log(this.formData.value);
  }
}

<mat-accordion>
  <mat-expansion-panel *ngFor="let table of tables">
    <mat-expansion-panel-header>
      <mat-panel-title> {{table}} </mat-panel-title>
    </mat-expansion-panel-header>
    <form [formGroup]="formData" (ngSubmit)="onConvertButtonClick()">
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput type="text" formControlName="firstName" />
      </mat-form-field>

      <mat-form-field>
        <mat-label>Last Name</mat-label>
        <input matInput type="text" formControlName="lastName" />
      </mat-form-field>
      <button>submit</button>
    </form>
  </mat-expansion-panel>
  <mat-expansion-panel
    (opened)="panelOpenState = true"
    (closed)="panelOpenState = false"
  >
  </mat-expansion-panel>
</mat-accordion>

如何在表单提交时获取特定表单值的值？

https://stackblitz.com/edit/angular-stcko7?file=src%2Fapp%2Fexpansion-overview-example.html

Answer 1

对于你的场景，你可以选择FormArray，这会有帮助，我已经对你的代码进行了一定程度的调整，并将解决方案粘贴在这里，看看，

您的 TS 文件可能如下所示，假设您有一个名为 AppComponent 的组件，如下所示，

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'Whosebug-examples';
    panelOpenState = false;
    tables: string[] = ['one', 'two', 'three', 'four', 'five'];
    formData: any;

    get formDataList() {
      return this.formData.controls;
    }

    constructor(
      private fb: FormBuilder
    ) { }

    ngOnInit() {

      this.formData = this.fb.array([]);

      for (let i=0; i<this.tables.length; i++) {
        this.formData.push(new FormGroup({
          firstName: new FormControl(''),
          lastName: new FormControl('')
        }))
      }
    }


  onConvertButtonClick() {
    for (let i=0; i< this.formData.controls.length; i++ ) {
      console.log(this.formData.controls[i].controls.firstName.value);
      console.log('--');
      console.log(this.formData.controls[i].controls.lastName.value);
    }
  }
}

您的 HTML 文件应如下所示，

<mat-accordion>
    <mat-expansion-panel *ngFor="let table of formDataList; index as i;">
      <mat-expansion-panel-header>
        <mat-panel-title> {{tables[i]}} </mat-panel-title>
      </mat-expansion-panel-header>
      <form [formGroup]="table" (ngSubmit)="onConvertButtonClick()">
        <mat-label>First name</mat-label>
        <input matInput type="text" formControlName="firstName" />
    
        <mat-label>Last Name</mat-label>
        <input matInput type="text" formControlName="lastName" />
        <button>submit</button>
      </form>
    </mat-expansion-panel>
    <mat-expansion-panel
      (opened)="panelOpenState = true"
      (closed)="panelOpenState = false"
    >
    </mat-expansion-panel>
  </mat-accordion>

在像您这样的情况下使用 FormArry 有一些好处，即使您需要以多种不同的方式操作表单，例如添加另一个 FormControl 或在某些情况下删除现有的 FormControl，您也会能够运行这样的场景愉快有效

请看下面的截图供您参考，

表单提交中返回了错误的值

Wrong value is returning in form submit

angular

angular9