【发布时间】：2019-04-23 16:36:48
【问题描述】：
我创建了一个组件来使用角度反应表单创建动态表单。当我尝试使用该组件根据我的 API 的响应在另一个组件中创建表单字段时。创建的表单对我来说是禁用的，我无法在浏览器中编辑表单。 我使用this 作为创建表单的参考。但是在这里他们对字段进行了硬编码，在我的例子中，我使用 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"
}
]
}
]
}
}
]
}
【问题讨论】：
-
您确定您在控制台中没有收到任何错误并且创建的输入是 DOM 中的
disabled吗？如果没有明确说明，表单不会被禁用，您能否为您的示例提供一些模拟的 http 响应？ -
@MaksymCierzniak 不，我没有明确禁用它。控制台中也出现错误：ERROR TypeError: Cannot read property 'findIndex' of undefined
-
所以看起来您的表单没有完全正确呈现，并且您必须找到一些错误。如果您可以将这部分代码发布到 stackblitz，我将能够看一下。如果不这样做，您应该获取错误消息中损坏的代码部分的链接。
-
@AkhilSundar 你能提供stackblitz代码吗
-
在 apiService 中有数据之前，您正在调用函数 getFields(tab)。因此，放置一个 if 来避免这种情况并调用 subscribe 中的函数。但最好你能理解你复制的代码。该代码是一个具有
@Input-the fields- 和一个@Output的组件（如果您的组件具有(onSubmit)="yourFunciton($event)"，您可以获得值。this.form 的一部分 = new FormGroup({...fields : new formControl(JSON.stringify(this.fields))}); 因为没有功能所以可以去掉
标签： angular angular7 angular-reactive-forms