One of the challenges I am facing involves using formArray for my list of products. Specifically, I am trying to access the value of product_code in my .ts file similar to [ngModel] so that I can manipulate the data accordingly. Can anyone provide guidance on how to achieve this?
<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);
}
To further demonstrate my issue, you can refer to this image: https://i.sstatic.net/xJfvn.png
My main goal is to retrieve the value of product_code, perform a certain function on it, and then assign the result to product_name. While I am familiar with achieving this using ngModel for two-way bindings, I am unsure how to accomplish it using FormControl or Reactiveforms. Any insights would be greatly appreciated.