Question

我将尽力解释我的问题。您有一个代码说明如何在Stackblitz上工作的示例。我有桌子。

//数据是我的formArray，必须具有ID和数量。

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

      <!-- Symbol Column -->
      <ng-container matColumnDef="images" class="test">
        <th mat-header-cell mat-sort-header *matHeaderCellDef> Kolicina </th>
       //this is input type which get quantity 
        <td mat-cell *matCellDef="let element" class="test"> <input formControlName="quantity" type="text"> </td>
      </ng-container>

      <ng-container matColumnDef="images2">
       //on click on this button i need to push new object with id and quantity in formArray
        <th mat-header-cell mat-sort-header *matHeaderCellDef> Dodaj </th>
        <td mat-cell *matCellDef="let element"> <button   mat-raised-button color="primary">Dodaj</button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       test(row.id) function is doing absolutely nothing for now. Only check id of row and row id  
 is ok
      <tr (click)="test(row.id)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

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

TS：

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

  ngOnInit() {
    //this is my all product which i share
    this.getProducts();
   //this is my form group. Only important for now is 'data' and Array.
    this.form = this.fb.group({
      deliveryDate: [''],
      data: this.fb.array([this.createContact()]),
      note: [null]
    });
    this.contactList = this.form.get('data') as FormArray;
  }

   //in my previous version I had a button that added new fields to me. now i don't want new fields 
    already existing already.
    //this function was passed to my form and should return id and quantity.
    createContact(): FormGroup {
    return this.fb.group({
      id: ['', Validators.required],
      quantity: ['', Validators.required]
    });
  }

    getContactsFormGroup(index): FormGroup { 
    const formGroup = this.contactList.controls[index] as FormGroup;
    return formGroup;
  }
    //in my previous version I had a button that added new fields to me. now i don't want new 
     fields already existing already.
   // in the previous version, I passed this feature on when I want new products to add with new 
   fields. Now I have no new fields already set up there in my table.
  addContact() {
    this.contactList.push(this.createContact());
  }
  // this function i use only to check my value of form.
  submit() {
    console.log(this.form.value);
  }

我的软件现在表现如何？当我单击输入字段旁边的按钮（此按钮https://ibb.co/1Tj2HNc）时，它仅添加了我链接到formControlName =“ quantity”的数量，并且工作正常。我想念一个身份证。当我看到console.log并看到form的值时，我看到

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

示例：https://ibb.co/tCZTFpd 我想念ID，但数量还可以。当我想在formArray中添加另一个产品时，在相同情况下，我填写另一个数量字段，然后按输入字段旁边的按钮。我希望这样填写formArray数据：

data: Array(2)
0: {id: "1", quantity: "4"}
1: {id: "2", quantity: "10"}

这是怎么回事？它只是覆盖旧值并添加一个新值。不添加新对象只会更改数量。我向您解释的内容可以在控制台的stackblitz中看到。 https://stackblitz.com/edit/angular-material-table-with-form-9wuhwv?file=app/app.module.ts

添加几个产品，您将看到console.log

我再说一遍。填写字段输入，然后单击旁边的按钮我希望它添加具有ID和数量的对象在第二个字段中填写与我相同的情况。那时我将连续有两个对象。

Angular FormArray像一个新对象一样推动formgroup？

0 个答案: