How can we allow users to add custom logic to Angular form?

[Paras Saxena]

I am developing a CRM platform using Angular where clients can design there own forms by dragging and dropping fields. Now i want them to give ability to add their own custom logic for forms. For example, i need to provide event handlers for all fields, events like onFormInitialize, onSave, onDelete, etc. They should be able to inherit from an interface(with these methods) that i provide and add additional logic or something like this. How can this be done? Where to store their code? How will it run dynamically when that particular form loads?

[Sander Elias]

Hi Paras,

There is no safe way to do this. This is only possible when the people using and creating the forms are trusted. (an intranet app inside a corporation might adhere to that). 

With that out of the way, you can actually store JS functions into text fields, and use eval to activate them again. 

console.log(eval('2 + 2') === eval(new String('2 + 2')));

// expected output: false

But again, this is not a safe operation. If a user injects malicious code, it will get executed.

Regards

Sander

[Paras Saxena]

Thanks Sander.
Is there any way to call some external typescript class that is not part of our angular solution at runtime? I want to give the users ability to write their own class with few methods, that will be called when the form component loads.

Thanks.

[Sander Elias]

Hi Paras,

Yes, but typescript needs to be compiled, so you need to compile it before you can use it. Compile, save the result to a text field, and you can eval it into action whenever you need it. When you dave the className into a separate text field, you can instantiate it on request. Just make sure it doesn't overwrite anything that is already in your app.

Regards

Sander

[Paras Saxena]

Okay, so if I convert it to Javascript, do i need to do Eval it at once? As it is not a single line of code, there will be a lot of methods that will be called at different point of times.
Like there will be a FormInitialize method, that will be called as soon as the form is initialized, similarly there will be a SaveRecord method, that will be called when the user submits the form.

[Sander Elias]

Hi Paras,

With current browsers supporting the `import()` it becomes even easier, and you don't need the eval anymore. Just provide the script from an API endpoint that sets the content-type to the correct mime-type. you can then use the default export as the entry point.

something like:

import('URLtoJsFileThatExports').then(module =>module())

Regards

Sander

[Paras Saxena]

One last question, i want them to write typescript code instead of js. Do you have any clue on how to covert ts to js. As they are going to upload the ts file through the same angular application, i want to compile the code and then save it as js.
And yeah Thank you so much

[Sander Elias]

Hi Paras,

You can use the typescript compiler from within your code, and capture the results

Regards
Sander