OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Map the values from an NgForm to a typescript model defined in Angular

  • Thread starter Thread starter Jeff O'Connell
  • Start date Start date
J

Jeff O'Connell

Guest
I'm looking for the most efficient way to map values from an NgForm to a typescript model defined in my Angular component. The form values are coming from a datatable (p-table using PrimeNG) with varying rows. I'm getting the values defined in a JSON object. I have appended the row index to the end of each form control name (- rowIndex). For example:

Code:
{
"controlA-0" : 123, "controlB-0" : 456, "controlC-0" : 789,
"controlA-1" : 321, "controlB-1" : 654, "controlC-1" : 987
"controlA-2" : 213, "controlB-2" : 564, "controlC-2" : 897
}

Here is my real JSON object from the NgForm (newOperationalAreaForm). The example form below has four (4) rows (counties) for the state of Hawaii in the p-table. Other forms (Different states) will have varying row counts depending on the number of counties in the selected state.

Code:
{
    "AreaOfOperationId-0": 0,
    "StateCountyLookupID-0": 544,
    "StateId-0": "12",
    "StateCode-0": "HI",
    "StateDisplayName-0": "Hawaii",
    "CountyId-0": "711",
    "CountyDisplayName-0": "Hawaii",
    "county-primary-0": true,
    "county-secondary-0": false,
    "county-na-0": false,
    "AreaOfOperationId-1": 0,
    "StateCountyLookupID-1": 545,
    "StateId-1": "12",
    "StateCode-1": "HI",
    "StateDisplayName-1": "Hawaii",
    "CountyId-1": "743",
    "CountyDisplayName-1": "Honolulu",
    "county-primary-1": false,
    "county-secondary-1": true,
    "county-na-1": false,
    "AreaOfOperationId-2": 0,
    "StateCountyLookupID-2": 546,
    "StateId-2": "12",
    "StateCode-2": "HI",
    "StateDisplayName-2": "Hawaii",
    "CountyId-2": "826",
    "CountyDisplayName-2": "Kauai",
    "county-primary-2": true,
    "county-secondary-2": false,
    "county-na-2": false,
    "AreaOfOperationId-3": 0,
    "StateCountyLookupID-3": 547,
    "StateId-3": "12",
    "StateCode-3": "HI",
    "StateDisplayName-3": "Hawaii",
    "CountyId-3": "996",
    "CountyDisplayName-3": "Maui",
    "county-primary-3": false,
    "county-secondary-3": false,
    "county-na-3": true
}

Here is the model defined in typescript that I need to map the NgForm to:

Code:
newOperationalArea= {
    AreaOfOperationId: number,
    StateCountyLookupID: number,
    State: {
      Id: string,
      Code: string,
      DisplayName: string
    },
    County: {
      Id: string,
      DisplayName: string,
    },
    county-primary: boolean,
    county-secondary: boolean,
    county-na: boolean,
  }

I tried using this code to get each control and the value but the values displayed in the console didn't produce the values that I need to submit the object to my web api.

Code:
Object.values(newOperationalAreaForm.controls).forEach( ctl => {
   console.log(ctl);
})

Here's the object I'm expecting to send to my web api put method:

Code:
"AreaOfOperation ="[
   {
      "AreaOfOperationId":0,
      "StateCountyLookupID":544,
      "State":{
         "Id":"12",
         "Code":"HI",
         "DisplayName":"Hawaii"
      },
      "County":{
         "Id":"711",
         "DisplayName":"Hawaii"
      },
      "county-primary":true,
      "county-secondary":false,
      "county-na":false
   },
   {
      "AreaOfOperationId":0,
      "StateCountyLookupID":545,
      "State":{
         "Id":"12",
         "Code":"HI",
         "DisplayName":"Hawaii"
      },
      "County":{
         "Id":"743",
         "DisplayName":"Honolulu"
      },
      "county-primary":false,
      "county-secondary":true,
      "county-na":false
   },
   {
      "AreaOfOperationId":0,
      "StateCountyLookupID":546,
      "State":{
         "Id":"12",
         "Code":"HI",
         "DisplayName":"Hawaii"
      },
      "County":{
         "Id":"826",
         "DisplayName":"Kauai"
      },
      "county-primary":true,
      "county-secondary":false,
      "county-na":false
   },
   {
      "AreaOfOperationId":0,
      "StateCountyLookupID":547,
      "State":{
         "Id":"12",
         "Code":"HI",
         "DisplayName":"Hawaii"
      },
      "County":{
         "Id":"996",
         "DisplayName":"Maui"
      },
      "county-primary":false,
      "county-secondary":false,
      "county-na":false
   }
]

<p>I'm looking for the most efficient way to map values from an NgForm to a typescript model defined in my Angular component. The form values are coming from a datatable (p-table using PrimeNG) with varying rows. I'm getting the values defined in a JSON object. I have appended the row index to the end of each form control name (- rowIndex).
For example:</p>
<pre><code>{
"controlA-0" : 123, "controlB-0" : 456, "controlC-0" : 789,
"controlA-1" : 321, "controlB-1" : 654, "controlC-1" : 987
"controlA-2" : 213, "controlB-2" : 564, "controlC-2" : 897
}
</code></pre>
<p>Here is my real JSON object from the NgForm (newOperationalAreaForm). The example form below has four (4) rows (counties) for the state of Hawaii in the p-table. Other forms (Different states) will have varying row counts depending on the number of counties in the selected state.</p>
<pre><code>{
"AreaOfOperationId-0": 0,
"StateCountyLookupID-0": 544,
"StateId-0": "12",
"StateCode-0": "HI",
"StateDisplayName-0": "Hawaii",
"CountyId-0": "711",
"CountyDisplayName-0": "Hawaii",
"county-primary-0": true,
"county-secondary-0": false,
"county-na-0": false,
"AreaOfOperationId-1": 0,
"StateCountyLookupID-1": 545,
"StateId-1": "12",
"StateCode-1": "HI",
"StateDisplayName-1": "Hawaii",
"CountyId-1": "743",
"CountyDisplayName-1": "Honolulu",
"county-primary-1": false,
"county-secondary-1": true,
"county-na-1": false,
"AreaOfOperationId-2": 0,
"StateCountyLookupID-2": 546,
"StateId-2": "12",
"StateCode-2": "HI",
"StateDisplayName-2": "Hawaii",
"CountyId-2": "826",
"CountyDisplayName-2": "Kauai",
"county-primary-2": true,
"county-secondary-2": false,
"county-na-2": false,
"AreaOfOperationId-3": 0,
"StateCountyLookupID-3": 547,
"StateId-3": "12",
"StateCode-3": "HI",
"StateDisplayName-3": "Hawaii",
"CountyId-3": "996",
"CountyDisplayName-3": "Maui",
"county-primary-3": false,
"county-secondary-3": false,
"county-na-3": true
}
</code></pre>
<p>Here is the model defined in typescript that I need to map the NgForm to:</p>
<pre><code>newOperationalArea= {
AreaOfOperationId: number,
StateCountyLookupID: number,
State: {
Id: string,
Code: string,
DisplayName: string
},
County: {
Id: string,
DisplayName: string,
},
county-primary: boolean,
county-secondary: boolean,
county-na: boolean,
}

</code></pre>
<p>I tried using this code to get each control and the value but the values displayed in the console didn't produce the values that I need to submit the object to my web api.</p>
<pre><code>Object.values(newOperationalAreaForm.controls).forEach( ctl => {
console.log(ctl);
})
</code></pre>
<p>Here's the object I'm expecting to send to my web api put method:</p>
<pre><code>"AreaOfOperation ="[
{
"AreaOfOperationId":0,
"StateCountyLookupID":544,
"State":{
"Id":"12",
"Code":"HI",
"DisplayName":"Hawaii"
},
"County":{
"Id":"711",
"DisplayName":"Hawaii"
},
"county-primary":true,
"county-secondary":false,
"county-na":false
},
{
"AreaOfOperationId":0,
"StateCountyLookupID":545,
"State":{
"Id":"12",
"Code":"HI",
"DisplayName":"Hawaii"
},
"County":{
"Id":"743",
"DisplayName":"Honolulu"
},
"county-primary":false,
"county-secondary":true,
"county-na":false
},
{
"AreaOfOperationId":0,
"StateCountyLookupID":546,
"State":{
"Id":"12",
"Code":"HI",
"DisplayName":"Hawaii"
},
"County":{
"Id":"826",
"DisplayName":"Kauai"
},
"county-primary":true,
"county-secondary":false,
"county-na":false
},
{
"AreaOfOperationId":0,
"StateCountyLookupID":547,
"State":{
"Id":"12",
"Code":"HI",
"DisplayName":"Hawaii"
},
"County":{
"Id":"996",
"DisplayName":"Maui"
},
"county-primary":false,
"county-secondary":false,
"county-na":false
}
]
</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top