Selectbox call to API - populate other fields with selected data from object

[boltonto]

Hi,

I'm hoping this is an easy question for a more seasoned Form.IO dev. I've added a selectbox which calls out to an API to return some product data. This works as expected, returning a number of (simple) objects containing a code and description property.

After picking the item, code is the value I'll be storing, but I also want to propagate the description property to the 'productName' text field (or select) that I've got on the form - as the intention is the user can search the API either way (either via code or description).

Some posts I've seen mention doing the following in the validator custom logic:

However - at this point, it looks like 'setValue()' is not available. In fact, the options are pretty limited once I've found the description component:

I'm using the AngularJS implementation, loading in ngFormIo and formio.full.min.js. I can't see anywhere else that I need to load anything else in - so not sure if I've missed something or this is a known problem.

So if anyone could advise the best approach to tackle this, I'd be very grateful.

Cheers,
Tony

Update 11 March 2022

So I think I'm getting somewhere. It was clear it wasn't going to work directly from that one selectbox - so I changed tact a little and moved the product search to a separate selectbox which I won't store in the database. To the validation logic, I added the following:

if ( input && input.code ){

var c = Formio.forms[instance.root.id].getComponent('productCodeNumber');
var d = Formio.forms[instance.root.id].getComponent('productName');

c.setValue(input.code);
d.setValue(input.description);

// Reset so that it doesn't keep triggering
self.resetValue();

}

The critical part to obtaining the components with the correct object type was via :

Formio.forms[instance.root.id].getComponents('componentName');

This was only through trial and error - nothing I can find in the documentation for this - so there must be an easier way, surely?

Anyway - once you've got the component, you can then call whatever you need to - in my case, setValue().

Crucially though, in order to allow the user to then amend the values once they've selected the item, I had to reset the value for the search selector - otherwise whenever the validator triggered (and it triggers alot) it would reset the value typed in by the user.

Still looking for a better answer though, so if anyone has anything let me know!

Cheers,

Tony