Formio custom component level auditing

we are using Formio as a stand alone custom forms engine in an angular application. One of the requirements is to have component level auditing, so I would like to add a unique identifier to each data item that is returned when the form is submitted.

my plan is to have something like the following returned for the components when the form is submitted. { uid:guid, value:value }

I have followed the developer docs and I have extended the textfield component as follows.

//import { Formio, FormioForm, FormioModule, } from '@formio/angular';
import {Formio,Components} from "@formio/js";

const Base = Components.components.textfield;
const editForm = Formio.Components.components.textfield.editForm;
//const Components = Formio.Components;

export class MyTextField extends Base {
constructor(component: any, options: any, data: any) {
super(component, options, data);
}
static schema(...extend: any) {
return Base.schema(
{
label: 'My Text Field',
key: 'mytextField',
type: 'mytextfield',
},
...extend
);
}

static builderInfo = {
title: 'My Text Box',
group: 'basic',
icon: 'fa fa-table',
weight: 70,
documentation: 'http://help.form.io/userguide/#table',
schema: MyTextField.schema(),
};
static editForm = editForm;

init(){
super.init();
}

attach(element :any) {

// Allow basic component functionality to attach like field logic and tooltips.
return super.attach(element);
}

getValue() {
let a= super.getValue();
return a;
}

updateValue(value: any, flags: any, index: any) {
super.updateValue(value, flags, index);
}

setValue(value: any, flags = {}) {
value={uid:'foo',value:value};
super.setValue(value, flags);
}

setValueAt(index: any, value: any, flags = {}){
setValueAt(index, value, flags);
}
}

// Use the table component edit form.
MyTextField.editForm = editForm;

// Register the component to the Formio.Components registry.
Components.addComponent('mytextfield', MyTextField);



The problem is that none of the suggested methods to override work. component is either displaying [object Object] or returning the value input.

Can anyone suggest a method/methods that I can override to update the model correctly and also to write the value to the html input element.

Thanks.

Continue reading...