1

How to push new values at the click of a button in formArray without adding new fields. Fields already exist, which means I don't need new ones, I just need new values from those fields entered.

Look at my code:

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

  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());
  }

This code works well when I set fields and add function addContact(). When click show new fields and work good but in this situation, I don't want new fields. I have existing fields only to enter a quantity and push id and quantity in new FormArray. This is an example what I need: https://ibb.co/1Tj2HNc ON click button add new. If you have any question just ask The current code works on principle when I add the first product: console.log(my form.values)

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

And this is good only need id but ok... But when I add new quantity for new fields example 15 for another field and console.log my form values:

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

override the old value and enter the new value. It should add a new object in array with that value.

Example:

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

Also i need id :)

EDIT:

I forgot a piece of code:

  get contactFormGroup() {
    return this.form.get('data') as FormArray;
  }
6
  • did you try: (this.form.get('data') as FormArray).push(<new_object>)? Commented Dec 14, 2019 at 9:28
  • @Kumar Where did you think this was? Commented Dec 14, 2019 at 9:33
  • [ts] Cannot find name 'push'. Commented Dec 14, 2019 at 9:36
  • does this answer your question: stackoverflow.com/a/43841831/3519504 Commented Dec 14, 2019 at 9:39
  • Maybe I will try but again i need Object with id and quantity to push. Commented Dec 14, 2019 at 9:42

1 Answer 1

0

just create new function that accepts the index you want to insert the data into and the object you want to insert and it should do what you want.

assignContactForm(index: number, data: any): void {
  // data is object of type {id: number, quantity: number }
  this.contactFormGroup.controls[i].patchValue(data);
 }
Sign up to request clarification or add additional context in comments.

14 Comments

I don't understand this logic.. Where I need to pass assignContactForm function?
on your form where you are getting you are getting the new id and quantity values from. you already have the index as I so use template variables to get the id and quantity and pass it to the function as one object. assign assignContactForm(i, {is, quantity}) where exactly are you getting the new values?. you haven't mentioned that.
Can you create stackblitz example ? @Mike
On submit() function submit() { console.log(this.form.value); } After I manipulate with form value
sorry but i don't have enough time to create stackblitz example for it, but i'll be glad to make the modification for you once you have.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.