angular form.io构建器如何自定义组件列表和每个组件的属性列表

Question

我使用的是form.io和angular 10。

我能够在angular cli中创建form.io的演示项目。

我还能够创建自定义组件，并为该组件设置自己的editForm。

import { Injector } from '@angular/core';
import { FormioCustomComponentInfo, registerCustomFormioComponent } from 'angular-formio';
import { AggridWrapperComponent } from './aggrid-wrapper.component';
export function minimalEditForm() {
return {
components: [
{ key: 'type', type: 'hidden' },
{
weight: 0,
type: 'textfield',
input: true,
key: 'label',
label: 'Label',
placeholder: 'Label',
validate: {
required: true,
},
},
{
weight: 10,
type: 'textfield',
input: true,
key: 'key',
label: 'Field Code',
placeholder: 'Field Code',
tooltip: 'The code/key/ID/name of the field.',
validate: {
required: true,
maxLength: 128,
pattern: '[A-Za-z]\w*',
patternMessage:
'The property name must only contain alphanumeric characters, underscores and should only be started by any letter character.',
},
},
{
weight: 20,
type: 'textfield',
input: true,
key: 'customOptions.myOption',
label: 'My Custom Option',
placeholder: 'My Custom Option',
validate: {
required: true,
},
},
],
};
}
const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
type: 'myaggrid',
selector: 'my-grid',
editForm:minimalEditForm,
title: 'agGrid',
group: 'basic',
icon: 'fa fa-star',
};

export function registerAgGridComponent(injector: Injector) {
registerCustomFormioComponent(COMPONENT_OPTIONS, AggridWrapperComponent, injector);
}

总体而言，form.io构建器提供了许多可拖放的组件。

但事实上，我需要少量的组件，并且在每个组件中减少属性/属性的数量或设置自己的属性。

我试着这样做，但不工作

<form-builder [form]='{
"title": "My Test Form",
"components": [
{
"type": "textfield",
"input": true,
"tableView": true,
"inputType": "text",
"inputMask": "",
"label": "First Name",
"key": "firstName",
"placeholder": "Enter your first name",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": "",
"protected": false,
"unique": false,
"persistent": true,
"validate": {
"required": true,
"minLength": 2,
"maxLength": 10,
"pattern": "",
"custom": "",
"customPrivate": false
},
"conditional": {
"show": "",
"when": null,
"eq": ""
}
},
{
"type": "textfield",
"input": true,
"tableView": true,
"inputType": "text",
"inputMask": "",
"label": "Last Name",
"key": "lastName",
"placeholder": "Enter your last name",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": "",
"protected": false,
"unique": false,
"persistent": true,
"validate": {
"required": true,
"minLength": 2,
"maxLength": 10,
"pattern": "",
"custom": "",
"customPrivate": false
},
"conditional": {
"show": "",
"when": null,
"eq": ""
}
},
{
"input": true,
"label": "Submit",
"tableView": false,
"key": "submit",
"size": "md",
"leftIcon": "",
"rightIcon": "",
"block": false,
"action": "submit",
"disableOnInvalid": true,
"theme": "primary",
"type": "button"
}
]
}' (change)="onChange($event)" language="he"></form-builder>

我如何定义自己的组件列表并在每个组件中配置属性/属性？

Answer 1

通过在表单生成器中使用[选项]属性，可以确定组件列表，还可以更改语言。

FormBuilder 中的角度formio集合语言示例