Сопоставьте значения из NgForm с моделью машинописного текста, определенной в Angular
Я ищу наиболее эффективный способ сопоставления значений из NgForm с моделью машинописного текста, определенной в моем компоненте Angular. Значения формы поступают из таблицы данных (p-таблицы с использованием PrimeNG) с разными строками. Я получаю значения, определенные в объекте JSON. Я добавил индекс строки в конец каждого имени элемента управления формы (-rowIndex). Например:
{
"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
}
Вот мой настоящий объект JSON из NgForm (newOperationalAreaForm). В приведенном ниже примере формы в p-таблице есть четыре (4) строки (округа) для штата Гавайи. Другие формы (разные штаты) будут иметь различное количество строк в зависимости от количества округов в выбранном штате.
{
"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
}
Вот модель, определенная в машинописном тексте, с которой мне нужно сопоставить NgForm:
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,
}
Я пытался использовать этот код, чтобы получить каждый элемент управления и значение, но значения, отображаемые в консоли, не дали значений, которые мне нужны для отправки объекта в мой веб-API.
Object.values(newOperationalAreaForm.controls).forEach( ctl => {
console.info(ctl);
})
Вот объект, который я ожидаю отправить в свой метод веб-API:
"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
}
]
@NarenMurali, спасибо за ответ. Я попробую собрать стекблиц. Исходные данные извлекаются из метода веб-API get с использованием модели данных машинописного текста (см. ниже). newOperationalArea= { AreaOfOperationId: число, StateCountyLookupID: число, State: { Id: строка, Код: строка, DisplayName: строка }, Округ: { Id: строка, DisplayName: строка, }, county-primary: логическое значение, county-вторичный: boolean, county-na: boolean, } Затем я применяю исходную модель данных из Get к элементам NgForm => JSON.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Позвольте мне объяснить это прямо. Вы хотите правильно отобразить строку из таблицы p-данных в форме и преобразовать ее в определенную вами машинописную модель?
Использовать form.getRawValues() для получения только значений?
//Обновлено:
export interface Data {
controlA: number;
controlB: number;
controlC: number;
}
const DATAKEYS = ['controlA', 'controlB', 'controlC'];
@Component(...)
export class Component implements OnInit {
private readonly json_data = {
'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,
};
private readonly result: Data[] = [];
ngOnInit() {
const items = 3;
for (let i = 0; i < items; i++) {
const data: Data = { controlA: 0, controlB: 0, controlC: 0 };
DATAKEYS.forEach((key) => {
const value =
this.json_data[`${key}-${i}` as keyof typeof this.json_data];
data[key as keyof Data] = value;
});
this.result.push(data);
}
}
}
@Марион, привет, спасибо за ответ. Нет, я правильно отображаю строки в p-таблице. Когда я отправляю форму, мне нужно сопоставить все значения формы из NgForm (newOperationalAreaForm.values) с моделью Typescript (newOperationalArea), чтобы создать массив объектов типа <newOperationalArea>. Когда я нажму «Отправить» для штата Гавайи, у меня будет четыре объекта типа <newOperationalArea>, поступающие из newOperationalAreaForm.values. Я знаю, что на Гавайях будет четыре объекта, потому что на Гавайях четыре округа. Из моего объекта JSON мне нужно сопоставить каждую строку
@Marion, в функции отправки я получаю значения NgForm с индексом rowIndex, добавленным к имени элемента управления (-0 для элементов 1-й строки, -1 для элементов 2-й строки, -2 для элементов 3-й строки и -3 для элементов 4-й строки предметы). Из объекта JSON, указанного в моем исходном сообщении, мне нужно сопоставить все элементы первой строки (-0) с моделью машинописного текста типа <newOperationalArea> "StateCountyLookupID-0": 544, будет сопоставлено с 1-м объектом => "StateCountyLookupID": 544, «StateCountyLookupID-1»: 545, будет сопоставлено второму объекту => «StateCountyLookupID»: 545, «StateCountyLookupID-2»: 546, => 3-му объекту и т. д.
@JeffO'Connell, я обновил свой пост
@Марион, это помогает! Большое спасибо!
@JeffO'Коннелл, это здорово! Это было приятно
пожалуйста, поделитесь исходными данными, которые вы хотите сопоставить с формой, а также, если возможно, stackblitz