Question

如何在formArray中单击按钮来推送新值而不添加新字段。字段已经存在，这意味着我不需要新的字段，我只需要输入的那些字段中的新值即可。

看看我的代码：

<form [formGroup]="form" (submit)="submit()">
  <div *ngFor="let data of contactFormGroup.controls; let i = index;" formArrayName="data">
    <div [formGroupName]="i">


      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Pretraži prozivod...">
      </mat-form-field>

      <table mat-table [dataSource]="productSource" matSort class="mat-elevation-z8">

        <!-- Position Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Broj Proizvoda </th>
          <td mat-cell *matCellDef="let element" > {{ element.id }} </td>
        </ng-container>


        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Naziv proizvoda </th>
          <td mat-cell *matCellDef="let element"> {{ element.name }} </td>

        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="description">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Opis proizvoda </th>
          <td mat-cell *matCellDef="let element"> {{element.description}} </td>
        </ng-container>

        <!-- quantity Column -->
        <ng-container matColumnDef="images" class="test" >
          <th mat-header-cell mat-sort-header *matHeaderCellDef> quantity</th>
      // i need this values but on click add new object in formArray 
          <td mat-cell *matCellDef="let element" class="test"> <input formControlName="quantity"  type="text"> </td>
        </ng-container>

        <ng-container matColumnDef="images2">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Add new </th>
          <td mat-cell *matCellDef="let element"> <button  mat-raised-button color="primary">Add new</button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr (click)="test(row.id)"  mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      </table>
      <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>

      <div class="button-submit">
        <button (click)="openDialog2()" mat-raised-button color="warn">
          Posalji narudzbu
        </button>
      </div>
    </div>
  </div>
</form>

Ts文件：

  ngOnInit() {
    this.productSource.sort = this.sort;
    this.productSource.paginator = this.paginator;
    this.getProducts();
    this.form = this.fb.group({
      deliveryDate: [''],
      data: this.fb.array([this.createContact()]),
      note: [null]
    });

    this.contactList = this.form.get('data') as FormArray;
  }


  createContact(): FormGroup {
    return this.fb.group({
      id: ['', Validators.required],
      quantity: ['', Validators.required]
    });
  }


  addContact() {
    this.contactList.push(this.createContact());
  }

当我设置字段并添加函数addContact（）时，此代码效果很好。单击“显示新字段”并运行良好，但是在这种情况下，我不需要新字段。我现有的字段仅用于输入数量并在新FormArray中推送ID和数量。这是我需要的一个示例：https://ibb.co/1Tj2HNc 在点击按钮添加新的。如果您有任何疑问，请问当我添加第一个产品时，当前代码可以正常工作： console.log(my form.values)

data: Array(1)
0: {id: "", quantity: "99"}

这很好，只需要id即可，但是......但是当我为新字段添加新数量时，例如为另一个字段添加15，并console.log我的表单值：

data: Array(1)
0: {id: "", quantity: "15 "}

覆盖旧值并输入新值。它应该在具有该值的数组中添加一个新对象。

示例：

data: Array(2)
0: {id: "", quantity: "99"}
1: {id: "", quantity: "15"}

我还需要ID :)

编辑：

我忘记了一段代码：

  get contactFormGroup() {
    return this.form.get('data') as FormArray;
  }

Answer 1

只需创建一个新函数即可接受您要向其中插入数据的索引和您要插入的对象，并且它应该执行您想要的操作。

assignContactForm(index: number, data: any): void {
  // data is object of type {id: number, quantity: number }
  this.contactFormGroup.controls[i].patchValue(data);
 }

如何在没有新字段的情况下推送FormArray而不是在现有字段中进行推送

1 个答案: