问题描述
我正在使用form.io和angular 10。
我能够在有角的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,key: 'key',label: 'Field Code',placeholder: 'Field Code',tooltip: 'The code/key/ID/name of the field.',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,key: 'customOptions.myOption',label: 'My Custom Option',placeholder: 'My Custom Option',],};
}
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","label": "Last Name","key": "lastName","placeholder": "Enter your last name",{
"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>
解决方法
通过使用form-builder中的[option]属性，可以确定组件列表并更改语言。