Dynamic form Issue in Angular

Question

Scenario :

A form is generated dynamically, I used this tutorial to create the form dynamically. When I click "Submit" button, the form value I get in the component is

ts :

  doSubmitICR(form) {
    console.log(form.value);

  }

form.value has the following values

{
 CaptainPoint:"0",
 Category:"restaurant",
 Description:"Test",
 DisplayDept:"kitchen",
 Group:"restaurant",
 GuestPoint:"0",
 ItemCode:"1",
 ItemName:"Test Item",
 PrintingDept:"frontoffice",
 SalesRate:"3",
 SubGroup:"restaurant",
 TAX1:true,
 TAX2:true,
 TabDisplay:"restaurant",
 Unit:"restaurant"
}

TAX1 and TAX2 are dynamic, those form controls were created from a tax table, If the table has TAX3 and TAX4, then instead of TAX1 and TAX2 in the above form, TAX3 and TAX4 form control is generated.

Issue :

If the TAXs are dynamic, how can I pass these values to Web service say WebAPI2 as a model?
Is it possible to filter only the TAX element from the form.value?

Any advice would be appreciated. Thank you.

Jack Koppa · Accepted Answer · 2017-09-14 12:31:17Z

1

The solution from alexKhymenko should work well. Alternatively, if the values you want to submit to the API will always have the format of TAX{d}, where d is some combination of digits, you could use the following to get just those values on a request object:

let request = {};
Object.keys(form.value).forEach(key => {
    if(/^TAX[\d]+$/.test(key)) 
        request[key] = form.value[key]
});

answered Sep 14, 2017 at 12:31

Jack Koppa

1,1913 gold badges13 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Dynamic form Issue in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related