动态表单，提交时动态添加的行为空

Question

目前我正在制作性别概览，您可以在其中编辑性别，使用简单的 table 添加或删除它。它已经可以添加和删除行。目前我正在努力将正确的网络 api 数据显示为文本框中的值，并将所有数据从表单 post 返回到网络 api。我的问题是，在我 console.log 我更新的数据源的数据之后，新值仍然是空的。我将在下面的屏幕截图中显示它。

这是我的 table:

<div class="controlpanel">
    <div id="operatoren">
        <button mat-mini-fab color="primary"(click)="addRow()" > <mat-icon color="white">  add </mat-icon> </button>
    </div>
</div>
<div class="container">
<form [formGroup]="genderForm">
    <table mat-table [dataSource]="genderDataSource" #genderTable >
        <ng-container matColumnDef="edit">
        <th mat-header-cell *matHeaderCellDef> Speichern  <mat-icon color="primary"> save </mat-icon> </th>
        <td mat-cell *matCellDef="let anreden; "> 
            
            <button mat-mini-fab color="primary" (click)="saveRow()" > <mat-icon color="white">  save </mat-icon> </button>
            
            </td>
        </ng-container>
        <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef> Löschen <mat-icon color="warn"> clear </mat-icon> </th>
        <td mat-cell *matCellDef="let anreden; let i = index"> 
            <button mat-mini-fab color="warn" (click)="confirmDelete(anreden.bezeichnung,i)" > <mat-icon color="white">  clear </mat-icon> </button>
            </td>
        </ng-container>
        <ng-container matColumnDef="bezeichnung">
        <th mat-header-cell *matHeaderCellDef> Bezeichnung </th>
        <td mat-cell *matCellDef="let anreden; "> 
            <ng-container>
                <mat-form-field appearance="standard">
                    <input matInput type="text" [value]='anreden.bezeichnung' formControlName="bezeichnung" name="anreden"> 
                </mat-form-field>
            </ng-container>       
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    </form>
</div>

这是我的 ts 来处理 table

  public displayedColumns = ['edit', 'delete', 'bezeichnung'];
  public genderDataSource: any[];
  public anreden = [] as any;
  genderForm: FormGroup;
  
  
  constructor(
    public dialog: MatDialog,
    public aService: AnredeVorschlägeService,
    private fb: FormBuilder,
  ) { 
  }
  createNewGender(): FormGroup{
    return this.fb.group({
      anredeVorschlagId: '',
      bezeichnung: new FormControl(''),
    })
  }
  @ViewChild('genderTable') table: MatTable<any>;
  ngOnInit(): void {
    this.genderForm = this.fb.group({
      anredeVorschlagId: '',
      bezeichnung: [''],
    });
    //Alle bezeichnungn
    this.aService.getAnrede()
    .subscribe(
      data => { 
        this.anreden = data;
        this.genderDataSource = data;
        console.log(this.genderDataSource);
        this.getStandardValues();
    });
  }
  addRow(){
      this.genderDataSource.push(this.createNewGender().value);
      this.table.renderRows();
  }
  saveRow(){

    console.log(this.genderForm.value);
    console.log(this.genderDataSource);
  }
  getStandardValues(){
    this.genderForm.patchValue({
      bezeichnung: this.anreden
    })
  }
  delRow(i:any){
    this.genderDataSource.splice(i, 1);
    this.table.renderRows();
  }
  confirmDelete(bezeichnung: string, i: any){
    this.dialog.open(ConfirmDialogComponent).afterClosed().subscribe(confirm => {
    if(confirm){
      this.delRow(i);
    }
    })
  }
}

这就是它目前的样子： https://ibb.co/fXQ8mL8

第一行和第二行的值“Herrn”和“Frau”应该来自网络api，我不知道为什么他们有“object Object”。第三行是我动态添加的行。在我的包含 3 个条目的数组中，应该是“bezeichnung: 123”而不是“bezeichnung: ''”（第 56 行）。只需记录表单值即可，并且 returns 正确的值（第 55 行）。

我的服务：

readonly aV = 'http://localhost:5000/api/anredevorschläge';
  getAnrede(): Observable<AnredeVorschläge[]> {
    return this.http.get<AnredeVorschläge[]>(this.aV);
  }

Answer 1

首先，如果您能在示例中添加一些类型信息，那就太好了。

其次，我认为您的表单结构必须更改。当前，您所有的行都与 genderForm 相关联，而不是您实际为该行创建的表单组。删除 genderForm 并改为执行以下操作以始终在正确的表单控件上工作。

<ng-container>
  <mat-form-field appearance="standard" [formGroup]=anrede.parent>
    <input matInput type="text" formControlName="bezeichnung"> 
  </mat-form-field>
</ng-container>

第三，API 的表单控件中 [object object] 的问题似乎来自 AnredeVorschlägeService.getAnreden() 函数，因为您直接将此函数的结果分配给数据源。要解决此问题，我们需要此函数的代码或 getAnreden() 函数的 return 类型。

动态表单，提交时动态添加的行为空

dynamic form, dynamic added row is empty while submitting

angular

typescript

angular-formbuilder