Here’s how to access data fetched from components that fetch and populate data via configured apis. This includes:
The data fetched from the api and then populated, is saved by their unique field key in the formly forms formState under a main property FETCHED_DATA .
formState: {
FETCHED_DATA: {
NIDNumberJSYjs8: {
sex: ...
...
...
},
ApplicationNumberY7wue: {
appplicationStatus: ...
...
...
},
UPINumberW9se: {
area: ...
...
...
},
}
}
With this you would not need to add unnecessary inputs to validate fetched data e.g.
These fetched data can then be accessible in fields expressions using formState?.FETCHED_DATA?.{{fieldKey}}?.{{dataPropertyAsUsedInPopulate}}..
e.g
This creates a regex to ensure field entered matches any ID Number from an array of fetched land owners in the UPI widget.
...
...
{
"props.pattern": "formState?.FETCHED_DATA?.UPINumberApJgt?.owners ? formState?.FETCHED_DATA?.UPINumberApJgt?.owners?.map(o=> '^' + o.idNo + '$')?.join('|') : undefined"
}
...
Another example:
Filling a text input with the land owner's name, that matched the NID or Passport number entered in the NID or Passport number fields.
...
...
{
"model.Textownerland1XvwF": "formState?.FETCHED_DATA?.UPINumberApJgt?.owners ? formState?.FETCHED_DATA?.UPINumberApJgt?.owners?.find(x=> x.idNo === model?.IdentificationdocumentnumbernlnSL)?.fullName : ''"
}
...
IMPORTANT NOTE: For better stability and performance of the model when using the model.{{key}} expression, please set a default value on the field to ensure the model is not returning undefined . A default string value should be fine for most field values.
{
...
defaultValue: "",
...
expressions: {
"model.Textownerland1XvwF": "formState?.FETCHED_DATA?.UPINumberApJgt?.owners ? formState?.FETCHED_DATA?.UPINumberApJgt?.owners?.find(x=> x.idNo === model?.IdentificationdocumentnumbernlnSL)?.fullName : ''"
}
...
}