CODEWITHSUNDEEP
angulartypescript
Isurendrasingh
Isurendrasingh

Reputation: 432

Angular Reactiveforms dynamic data

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: enter image description here

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?

Upvotes: 0

Views: 54

Answers (1)

Buczkowski
Buczkowski

Reputation: 2416

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

Upvotes: 1

Related Questions