formio.js
formio.js copied to clipboard
Having issues while adding additional properties to Textfield component configuration model
I have a Custom Text field component, which is. created by extending Textfield component as follows,
`/* tslint:disable */
import TextField from 'formiojs/components/textfield/TextField';
import editForm from './editForm';
export default class CustomTextField extends TextField {
static schema(...extend) {
return TextField.schema(
{
input: false,
persistent: false,
},
...extend
);
}
static editForm = editForm;
static get builderInfo() {
return {
title: 'Text field',
group: 'basic',
icon: 'code',
weight: 70,
schema: CustomTextField.schema(),
};
}
}
` editform.js is as follows
import baseEditForm from 'formiojs/components/_classes/component/Component.form';
export default (...extend) => {
return baseEditForm(
[
{
key: 'display',
components: [
{
// You can ignore existing fields.
key: 'placeholder',
ignore: true,
},
{
// Or add your own. The syntax is form.io component definitions.
type: 'textfield',
input: true,
label: 'My Custom Setting',
weight: 12,
key: 'myCustomSetting', // This will be available as component.myCustomSetting
},
],
},
{
key: 'data',
components: [],
},
{
key: 'validation',
components: [],
},
{
key: 'api',
components: [],
},
{
key: 'conditional',
components: [],
},
{
key: 'logic',
components: [],
},
],
...extend
);
};
```
`
The above configuration is not adding the custom property to the configuration model while I try to add the custom text field.
What is the correct way to do it?
Thanks!
I have a similar setup to what you have but was able to see the my custom properties on my custom component. What are you doing to check that the custom property is added to the configuration model? Also what version of formiojs are you on? We do have a tutorial on making a custom component in our help docs that might be of use https://help.form.io/faq/tutorials-and-workflows/custom-component