0

I want to set values to form Array,i am unable to set new values.

I have tried to set values using patch value,but failed

//in component.ts
this.packageForm = this.formBuilder.group({
  title: ['', Validators.required],
  productImage: ['', Validators.required],
  price: ['', Validators.required],
  products: this.formBuilder.array([
    this.addProductFormGroup()
  ])
})

//form builder Array
addProductFormGroup(): FormGroup {
 return this.formBuilder.group({
  productNames: ['',Validators.required],
  productQuantities: ['',Validators.required]
})
}

 //adding row
addProductsRow() 
{
 (<FormArray>this.packageForm.get('products'))
 .push(this.addProductFormGroup();
}

//deleting row
 removeProductsRow(productGroupIndex: number) {  
 (<FormArray>this.packageForm.get('products'))
 .removeAt(productGroupIndex);
}

addPackage() {
this.productNames=null;
this.productQuantities=null;
this.packageForm.value.products.forEach(element => {
  this.productNames = (this.productNames == null) ? element.productNames 
   : this.productNames + "~" + element.productNames;
   this.productQuantities = (this.productQuantities == null) ? 
  element.productQuantities : this.productQuantities + "~" + 
   element.productQuantities;
  });
}

i'm getting values from form with this click event addPackage(),I want to send form data in this format productNamesas [oil~sugar~flour] and productQuantity as [4~3~5].

2
  • Question is not clear, can u elaborate the question and what you need to get ? Commented Sep 6, 2019 at 11:52
  • hi sudhakar,i want to change the values of "productNames" and "productQuntity" as [oil~sugar~flour] and [4~3~5] before sending it to service file. i'm getting data from form like this array 0:{productNames: "oil", productQuantities: "4"} 1: {productNames: "sugar", productQuantities: "3"} 2: {productNames: "flour", productQuantities: "5"} Commented Sep 6, 2019 at 12:03

2 Answers 2

1
  addPackage() {
    const data = this.packageForm.getRawValue();
    this.productNames = data.products.map(e => e.productNames).join('~');
    this.productQuantities = data.products.map(e => e.productQuantities).join('~')
  }

https://stackblitz.com/edit/angular-gmczgr?file=src/app/app.component.ts

Sign up to request clarification or add additional context in comments.

Comments

1

Try this:

  private addPackage() {
    const productNames = [];
    const productQuantities = [];

    this.packageForm.value.products.forEach(element => {
      productNames.push(element.productNames);
      productQuantities.push(element.productQuantities);
    });

    return {
      productNames: '[' + productNames.join('~') + ']', 
      productQuantities: '[' + productQuantities.join('~') + ']'
    };
  }

Inside your onSubmit handler you can create a new object that will be sent to your backend api. Something like this:

onSubmit() {
    const obj = this.addPackage();

    console.log(obj.productNames);
    console.log(obj.productQuantities);

    const dataToSend = {
      ...obj,
      title: this.packageForm.controls.title.value,
      price: this.packageForm.controls.price.value
    };

    // send this object to the backend API
    console.log(dataToSend)

  }

Stackblitz.

2 Comments

hi robert,thanks for your contribution . <button type="button" class="btn btn-primary" (click)="addPackage()">Submit</button> up on clicking this button i'm getting form data how to use onSubmit(),can we use addPackage() and onSubmit() at the same time
Yes, you can. Add submit button like this: <button class="btn btn-primary">Submit</button>, and in your TS file call addPackage from onSubmit method.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.