Validation issue with conditional fields rendering

[lscmaro]

Hi Ivan,
I'm kind of stuck and am having odd validation issues.
I have conditional fields. The field is conditional by a selection of an existing form field.
Country and Region

If a Country is selected and has NO state options, an InputField is rendered.
If a Country is selected and DOES have states, a SelectField is rendered and should be required.

When an InputField is rendered it is not required but the validation for the select is still required.

Here is an example of this here: CodeSandbox

Select a Country that does not have regions and an Input will render. trying to submit will trigger invalid for that field but it should not be required.

Is there a way to invalidate the required that was on the select when an input is rendered?
Thanks

[ivan-dalmet]

Hi @lscmaro,
You will need to use the validations with the deps property for this because your validation depends on an external value.

<SelectField
  name="customer_info.region"
  options={regionOptions}
  type="regions"
  label="State"
  validations={[
    {
      rule: (value) => regionOptions ? !!value : true, // Return false only if there are some regionOptions and no value
      message: "State is Required",
      deps: [regionOptions] // This is important for updating the validation when the regionOptions change
    }
  ]}
/>

Sandbox updated

[ivan-dalmet]

Ok so I've found an little bug because the following code should works too

<SelectField
  name="customer_info.region"
  options={regionOptions}
  type="regions"
  label="State"
  required={regionOptions ? "State is Required" : false}
/>

I will release a new version to fix this issue :)

[ivan-dalmet]

@lscmaro
I just released a version 1.1.1 of @formiz/core so you can write the following code:

<SelectField
  name="customer_info.region"
  options={regionOptions}
  type="regions"
  label="State"
  required={regionOptions ? "State is Required" : false}
/>

(don't forget to update the @formiz/core package to get the fix 😊)

[lscmaro]

This is great and was the perfect fix for this! Thank you so much! 🥳