Search results
Form fields in Vue DocumentEditor component
25 Oct 2021 / 2 minutes to read
Document Editor Container component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
Insert form field
Form fields can be inserted using insertFormField method in editor module.
//Insert Text form field
this.$refs.documenteditor.ej2Instances.editor.insertFormField('Text');
//Insert Checkbox form field
this.$refs.documenteditor.ej2Instances.editor.insertFormField('CheckBox');
//Insert Drop down form field
this.$refs.documenteditor.ej2Instances.editor.insertFormField('Dropdown');Get form field names
All the form fields names form current document can be retrieved using getFormFieldNames().
this.$refs.documenteditor.ej2Instances.getFormFieldNames();Get form field properties
Form field properties can be retrieved using getFormFieldInfo().
//Text form field
var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
//Checkbox form field
var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
//Dropdown form field
var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');Set form field properties
Form field properties can be modified using setFormFieldInfo.
// Set text form field properties
var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
textfieldInfo.defaultValue = "Hello";
textfieldInfo.format = "Uppercase";
textfieldInfo.type = "Text";
this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Text1',textfieldInfo);
// Set checkbox form field properties
var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
checkboxfieldInfo.defaultValue = true;
this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Check1',checkboxfieldInfo);
// Set checkbox form field properties
var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');
dropdownfieldInfo.dropDownItems = ['One','Two', 'Three']
this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Drop1',dropdownfieldInfo);Export form field data
Data of the all the Form fields in the document can be exported using exportFormData.
var formFieldDate = this.$refs.documenteditor.ej2Instances.exportFormData();Import form field data
Form fields can be prefilled with data using importFormData.
var textformField = {fieldName: 'Text1', value: 'Hello World'};
var checkformField = {fieldName: 'Check1', value: true};
var dropdownformField = {fieldName: 'Drop1', value: 1};
//Import form field data
this.$refs.documenteditor.ej2Instances.importFormData([textformField,checkformField,dropdownformField]);Reset form fields
Reset all the form fields in current document to default value using resetFormFields.
this.$refs.documenteditor.ej2Instances.resetFormFields();Thank you for your feedback and comments.We will rectify this as soon as possible!