У меня есть задача, в которой мне нужно нажать Get API, и в этом ответе API я получаю ключ поля HTML (ключ API может быть 2 или более), с помощью которого мне нужно динамически создавать форму HTML в соответствии с ключом ,
Ниже мой HTML
код, с которым я создаю форму:
<form class="form-horizontal" #f1=ngForm>
<div class="clearfix"></div>
<div class="row">
<div class="col-12">
<div class="form-row" *ngFor="let aux of AuxfieldAndData">
<div class="form-group col-md-6">
<label for="Credit Limit Currency"> {{aux.ColumnTitle}}</label>
<select class="form-control" *ngIf="aux.DropDownArray.length !== 0; else txtBox" [(ngModel)]="aux.ColumnName" [name]="aux.ColumnName">
<option [value]="field.key" *ngFor="let field of aux.DropDownArray">{{field.value}}</option>
</select>
<ng-template #txtBox>
<input type="text" class="form-control" [(ngModel)]="aux.ColumnName" [name]="aux.ColumnName">
</ng-template>
</div>
</div>
</div>
<div class="col-md-12 text-right mt-3">
<button type="submit" id="submit" (click)=" doOnSubmit($event)" class="btn btn-primary">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</div>
</form>
и метод для чтения данных API, записанных в TypeScript
:
createDynamicFields(dataArray: Array<any>) {
dataArray.forEach(auxiliary => {
const dropValue = auxiliary.values;
const dropdownList = [];
if (dropValue !== null) {
const DVal = Object.keys(auxiliary.values);
DVal.forEach(DropDownVal => {
const list = {
key: DropDownVal,
value: dropValue[DropDownVal]
};
dropdownList.push(list);
});
}
const array = {
ColumnTitle: auxiliary.columnTitle,
DropDownArray: dropdownList,
ColumnName: auxiliary.columnName
};
this.AuxfieldAndData.push(array);
});
}
Здесь я успешно создаю форму, но я не знаю, как создать ее модель и связать ее с формой для публикации данных формы
Я также делюсь ответом API ниже:
{
"auxiliaryformfeild":[
{
"columnName":"credit_currency",
"columnTitle":"Credit Limit Currency",
"values":{
"Euro":"EUR",
"Sterling":"GBP",
"US Dollar":"USD"
}
},
{
"columnName":"credit_limit",
"columnTitle":"Credit Limit",
"values":null
}
],
"Status":"OK"
}
Пожалуйста, помогите мне с вышеуказанным сценарием. Заранее спасибо.