Question

我有一张桌子和一些预定义的东西。单击添加按钮时，我想向“数据”数组添加新的json产品。杰森单品有编号和数量。

用表格查看我的模板：

<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>

        <!-- QuantityColumn -->
          //this is quantity which which is parameter in my json product
        <ng-container matColumnDef="images" class="test">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Kolicina </th>
          <td mat-cell *matCellDef="let element" class="test"> <input formControlName="quantity" type="text"> </td>
        </ng-container>

//here on click add i want to add new product json with id and quantity in data array
        <ng-container matColumnDef="images2">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Add </th>
          <td mat-cell *matCellDef="let element"> <button (click)="addContact()" mat-raised-button color="primary">Add </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">
          Send Order
        </button>
      </div>
    </div>
  </div>

这是我的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;
  }


  getContactsFormGroup(index): FormGroup {
    // this.contactList = this.form.get('contacts') as FormArray;
    const formGroup = this.contactList.controls[index] as FormGroup;
    return formGroup;
  }
  addContact() {
    this.contactList.push(this.createContact());
  }


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

当前的问题是它仅记录了我输入的最后一个产品。这是我想要的示例：https://ibb.co/1Tj2HNc 单击后，以我的语言“ Dodaj”添加，我想在FormArray中添加新产品。如果我为第一个产品示例5添加数量并为第二个产品10添加数量。我的数据数组（FormArray）中填充了最后输入的产品。我想单击添加或在我的语言“ Dodaj”上添加新的json。

将FormArray推入Angular Material表的fromgroup

0 个答案: