[英]Creating dynamic forms from api response in angular7
我创建了一个使用角度反应形式创建动态表单的组件。 当我尝试使用该组件在另一个组件中创建表单字段时,具体取决于我的API的响应。 创建的表单对我来说已禁用,我无法在浏览器中编辑表单。 我用它作为创建表单的参考。 但是在这里他们硬编码了字段,在我的例子中,我使用API调用将字段作为JSON。
我的TS代码:
getFields(tab) {
this.fields = [];
const itemIndex = this.dynamicFields.findIndex(item =>
item.tab_name === tab);
this.dynamicFields[itemIndex].extra_fields[tab].forEach(value => {
this.fields.push(
{
type: value.type,
name: value.name,
label: value.name,
value: '',
required: value.required,
}
)
});
this.form = new FormGroup({
fields: new FormControl(JSON.stringify(this.fields))
});
return this.fields;
}
getDynamicFields() {
this.apiService.get('dynamic-fields/').subscribe(
data => {
this.dynamicFields = data.results;
},
error => {
console.log(error);
});
}
我的HTML:
<ng-template ngbTabContent>
<dynamic-form-builder [fields]="getFields('health')"></dynamic-form-builder>
</ng-template>
API响应:
{
"totalElements": 3,
"totalPages": 1,
"results": [
{
"id": 1,
"created": "2019-04-09T06:52:50.776000Z",
"updated": "2019-04-09T08:54:44.664000Z",
"tab_name": "passport",
"extra_fields": {
"passport": [
{
"name": "name",
"type": "text",
"label": "Name on Passport",
"value": "",
"required": "true"
},
{
"name": "passportNo",
"type": "text",
"label": "Passport No",
"value": "",
"required": "true"
},
{
"name": "dateOfIssue",
"type": "date",
"label": "Date of Issue",
"value": "",
"required": "true"
},
{
"name": "dateOfExpiry",
"type": "date",
"label": "Date of Expiry",
"value": "",
"required": "true"
},
{
"name": "placeOfIsse",
"type": "text",
"label": "Place of issue",
"value": "",
"required": "true"
}
]
},
"general_fields": null
},
{
"id": 2,
"created": "2019-04-09T07:44:12.113000Z",
"updated": "2019-04-09T07:44:12.113000Z",
"tab_name": "bank",
"extra_fields": {
"bank": [
{
"name": "name",
"type": "text",
"label": "Bank Name",
"value": "",
"required": "true"
},
{
"name": "accountName",
"type": "text",
"label": " Name of the account Holder",
"value": "",
"required": "true"
},
{
"name": "accountNo",
"type": "text",
"label": "Account No",
"value": "",
"required": "true"
},
{
"name": "accountType",
"type": "text",
"label": "Account Type",
"value": "",
"required": "true"
},
{
"name": "code",
"type": "text",
"label": "IFSC/SWIFT Code",
"value": "",
"required": "true"
}
]
},
"general_fields": null
},
{
"id": 3,
"created": "2019-04-09T07:45:25.721000Z",
"updated": "2019-04-22T07:21:53.389265Z",
"tab_name": "health",
"extra_fields": {
"health": [
{
"name": "Blood Group123",
"type": "text",
"required": "true"
},
{
"name": "Height",
"type": "text",
"required": "true"
},
{
"name": "Weight",
"type": "text",
"required": true
},
{
"name": "dsafsa",
"type": "text",
"required": ""
}
]
},
"general_fields": {
"health": [
{
"group": [
{
"name": "label",
"type": "text",
"value": "Blood Group"
},
{
"name": "type",
"type": "text",
"value": "text"
},
{
"name": "required",
"type": "checkbox",
"value": "true"
}
]
}
]
}
}
]
}
AKHIL。 正如我所说,你输入的代码是一个带有输入和输出的组件。 在这个stackblitz中我改变了“哲学”来创建一个管理“FormsControl”的组件
不同之处在于,现在您在appComponent中创建FormGroup,而不是在dynamic-form-builder中创建FormGroup。 这是因为“提交”现在属于app-component。 另一个区别是“原子”得到@Input
一个FormControl - 除了复选框列表 - 并且没有引用表单。 这不是必要的。
使用此方法,您可以首先创建整个formGroup。 请记住,FormGroup存在并且独立于我们是否有输入。 然后,您可以根据文件创建不同的“标签”或“任何”。
在stackblitz中,我将原始列表分成两组,然后我做了一个简单的<div *ngFor>
我希望这对你有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.