I have a custom renderer for radio control. When the value ‘No’ is provided to the radio control, I conditionally render an object(mailing_address_props) with few properties. There is a “Continue” button on the screen. If user clicks on the button form is validated.
My problem is when the object mailing_address_props is conditionally rendered on the UI, it will not be validated until one of the property control is touched. i.e. if the ‘mail_zip_code’ is changed then only ‘mail_city’ will be validated.
Other properties like ‘first_name’, and ‘last_name’ will be validated because these are present in the outer object.
schema:
{
type: 'object',
schemaName: 'Parent',
properties: {
home_address_also_mailing_address: {
type: 'string',
enum: ['Yes', 'No'],
isCustomRadioButtons: true,
},
first_name: {
type: 'string',
title: 'FirstName',
},
middle_name: {
type: 'string',
title: 'MiddleName(Optional)',
},
last_name: {
type: 'string',
title: 'LastName',
},
ssn_itin: {
type: 'string',
title: 'SSN/ITIN',
},
home_address: {
type: 'string',
title: 'HomeAddress',
},
city: {
type: 'string',
title: 'City',
},
zip_code: {
type: 'string',
title: 'ZipCode',
},
mailing_address_props: {
type: 'object',
title: 'MailingAddress',
properties: {
mail_address: {
type: 'string',
title: 'MailingAddress',
},
mail_city: {
type: 'string',
title: 'City',
},
mail_zip_code: {
type: 'string',
title: 'ZipCode',
},
},
},
},
if: {
properties: { home_address_also_mailing_address: { const: 'No' } },
},
then: {
properties: {
mailing_address_props: {
required: ['mail_city'],
},
},
},
required: [
'first_name',
'last_name',
'ssn_itin',
'home_address',
'city',
'zip_code',
'home_address_also_mailing_address',
],
}
uischema:
{
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/first_name',
},
{
type: 'Control',
scope: '#/properties/middle_name',
},
{
type: 'Control',
scope: '#/properties/last_name',
},
{
type: 'Control',
label: 'Suffix(Optional)',
scope: '#/properties/suffix',
},
{
scope: '#/properties/ssn_itin',
type: 'Control',
},
{
scope: '#/properties/home_address',
type: 'Control',
},
{
type: 'Control',
scope: '#/properties/city',
},
{
type: 'Control',
scope: '#/properties/zip_code',
},
{
type: 'Control',
label: 'Isyourcurrenthomeaddressalsoyourmailingaddress?',
scope: '#/properties/home_address_also_mailing_address',
options: {
format: 'radio',
},
},
{
type: 'Control',
label: 'Enteryourmailingaddress',
header: 'Property',
scope: '#/properties/mailing_address_props',
rule: {
effect: 'SHOW',
condition: {
scope: '#/properties/home_address_also_mailing_address',
schema: {
enum: ['No'],
},
},
},
},
],
}