Angular Reactiveforms dynamic data

Question

I am using formArray for my list of product. I want to get the product_code's value in .ts just like [ngModel] and then manipulate the data. How to get the product_code's value?

<tbody formArrayName="products">
 <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i">
   <th scope="row">{{i+1}}</th>
    <td><input type="text" class="form-control" placeholder="Product Code" formControlName="product_code"></td>
    <td><input type="text" class="form-control" placeholder="Product Name" formControlName="product_name"></td>
    <td><button type="button" class="btn btn-danger ml-2" (click)="deleteProduct(i)">Remove</button></td>
 </tr>
</tbody>

.ts code:

ngOnInit() {
const product = this.fb.group({
      product_code: [],
      product_name: [],
      product_price: [],
      product_quantity: [1],
      product_total: []
    });

 this.myForm = this.fb.group({
  products: this.fb.array([product]),
 }
}
  get productForms() {
    return this.myForm.get('products') as FormArray;
  }

  addProduct() {
    const product = this.fb.group({
      product_code: [],
      product_name: [],
      product_price: [],
      product_quantity: [1],
      product_total: []
    });

    this.productForms.push(product);
  }

  deleteProduct(i) {
    this.productForms.removeAt(i);
  }

For more clarification see this:

When i enter any number in the product_code field i need that value in .ts code which also handles the changes or say subscription.

I want to get the product_code value, perform some function and assign the return value to product_name. I know how to achieve this using ngModel two way bindings, but how to do using FormControl or say Reactiveforms?

Do you mean something like form.controls['product_name'].value ? — Erez Shlomo
– Erez Shlomo, Commented Sep 17, 2018 at 9:16
Create stackblitz with ngModel that you want to archive. After that i will convert it with Reactiveforms — Shashikant Devani
– Shashikant Devani, Commented Sep 17, 2018 at 9:21

Buczkowski · Accepted Answer · 2018-09-17 16:10:02Z

1

There is sample how you can loop through products and get eg. product_quantity value:

const product = this.fb.group({
    product_code: [],
    product_name: [],
    product_price: [],
    product_quantity: [1],
    product_total: []
});

const form = this.fb.group({
    products: this.fb.array([product]),
});

const productsArray = form.controls.products as FormArray;
const productsNumber = productsArray.controls.length;
for (let i = 0; i < productsNumber; i++) {
    const productGroup = productsArray.controls[i] as FormGroup;
    console.log(productGroup.controls.product_quantity.value);
}

@Edit 1 Above sample get value only at the moment when you ask for that.

Here is to get it whenever it changes:

for (let i = 0; i < productsNumber; i++) {
    const productGroup = productsArray.controls[i] as FormGroup;

    productGroup.controls.product_code.valueChanges.subscribe(val => {
        // Whenever value of product code changes update product name
        productGroup.controls.product_name.setValue(val + 'some value');
    });
}

@Edit 2 Modified addProduct method to react for newly added controls:

addProduct() {
    const product = this.fb.group({
        product_code: [],
        product_name: [],
        product_price: [],
        product_quantity: [1],
        product_total: []
    });

    product.controls.product_code.valueChanges.subscribe(val => {
        // Whenever value of product code changes update product name
        product.controls.product_name.setValue(val + 'some value');
    });

    this.productForms.push(product);
}

edited Sep 17, 2018 at 16:10

answered Sep 17, 2018 at 9:16

Buczkowski

2,41614 silver badges19 bronze badges

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

6 Comments

Isurendrasingh Over a year ago

This gives all the value of a field. but there is no subscription to this. eg if i change the input it should change without submit

Buczkowski Over a year ago

@SurendraSinghChhabra yes, it will give value at the moment, when you want to check over changes you can subscribe to valueChanges.

Buczkowski Over a year ago

@SurendraSinghChhabra I edited my answer, check if this is what you want.

Buczkowski Over a year ago

@SurendraSinghChhabra yes because in addProduct method you add new set of controls and for them you also need to set up some logic when value changes.

Isurendrasingh Over a year ago

can you please provide that logic :D

|

Collectives™ on Stack Overflow

Angular Reactiveforms dynamic data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related