时间戳

首页 > 解决方案 > 动态表单，提交时动态添加的行为空

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

问题描述

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

这是我的桌子：

<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

  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

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

我的服务：

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

标签： angulartypescriptangular-formbuilder

解决方案

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

其次，我认为您的表单结构必须更改。目前，您的所有行都与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()。

推荐阅读