Conditions

DYONA Form permite cambiar declarativamente el comportamiento del formulario según el valor de otro field.

Probalo en vivo

¿Querés ver estas condiciones declarativas reaccionando en tiempo real?

Abrir Conditions en el Lab →

{
  visibleWhen: {
    field: 'customerType',
    operator: 'equals',
    value: 'company'
  }
}

La aplicación consumidora no necesita implementar if, useState ni JSX condicional para mostrar u ocultar el field. DYONA Form evalúa la condición usando los values actuales del formulario.

DyonaFieldCondition

type DyonaFieldCondition = {
  field: string;
  operator: DyonaConditionOperator;
  value: DyonaConditionValue;
};

• field es el nombre del field cuyo valor se observa.
• operator es la comparación que realiza DYONA Form.
• value es el valor esperado o la colección de valores, según el operator.

visibleWhen

visibleWhen controla si un field debe mostrarse.

{
  name: 'companyName',
  label: 'Razón social',
  type: 'text',
  visibleWhen: {
    field: 'customerType',
    operator: 'equals',
    value: 'company'
  }
}

Cuando la condición es true, el field se muestra; cuando es false, queda oculto. visible: false tiene prioridad absoluta y mantiene el field oculto incluso si visibleWhen es true.

requiredWhen

requiredWhen convierte un field en obligatorio solo cuando se cumple su condición.

{
  name: 'taxId',
  label: 'Identificación fiscal',
  type: 'text',
  visibleWhen: {field: 'customerType', operator: 'equals', value: 'company'},
  requiredWhen: {field: 'customerType', operator: 'equals', value: 'company'}
}

visibleWhen y requiredWhen pueden usar la misma condición. Un field también puede ser obligatorio mediante required: true o una validation required; consultá Validation para esos mecanismos.

Operadores disponibles

Operator	Significado	value esperado
equals	El valor actual es igual al esperado.	Escalar
notEquals	El valor actual es diferente al esperado.	Escalar
greaterThan	Comparación numérica mayor que.	Número
lessThan	Comparación numérica menor que.	Número
in	El valor actual pertenece a una colección.	Array no vacío
notIn	El valor actual no pertenece a una colección.	Array no vacío

Ejemplo detallado: equals

Cuando customerType equals "company", se muestran Razón social e Identificación fiscal y pasan a ser obligatorios.

{
  name: 'customerType', label: 'Tipo de cliente', type: 'select', required: true,
  options: [{value: 'person', label: 'Persona'}, {value: 'company', label: 'Empresa'}]
},
{
  name: 'companyName', label: 'Razón social', type: 'text',
  visibleWhen: {field: 'customerType', operator: 'equals', value: 'company'},
  requiredWhen: {field: 'customerType', operator: 'equals', value: 'company'}
},
{
  name: 'taxId', label: 'Identificación fiscal', type: 'text',
  visibleWhen: {field: 'customerType', operator: 'equals', value: 'company'},
  requiredWhen: {field: 'customerType', operator: 'equals', value: 'company'}
}

Ejemplo detallado: greaterThan

Si el Importe del pedido supera 10.000, aparece Motivo de aprobación y se vuelve obligatorio.

{
  name: 'approvalReason',
  label: 'Motivo de aprobación',
  type: 'text',
  visibleWhen: {field: 'orderAmount', operator: 'greaterThan', value: 10000},
  requiredWhen: {field: 'orderAmount', operator: 'greaterThan', value: 10000}
}

Ejemplo detallado: in

Para Reintegro o Crédito, aparece Motivo de la solicitud y se vuelve obligatorio.

{
  name: 'requestReason',
  label: 'Motivo de la solicitud',
  type: 'text',
  visibleWhen: {field: 'requestType', operator: 'in', value: ['refund', 'credit']},
  requiredWhen: {field: 'requestType', operator: 'in', value: ['refund', 'credit']}
}

Ejemplo detallado: notEquals

Cuando el Tipo de contratación es diferente de Empleado, Empresa contratista se muestra y pasa a ser obligatoria.

{
  name: 'contractCompany',
  label: 'Empresa contratista',
  type: 'text',
  visibleWhen: {field: 'employmentType', operator: 'notEquals', value: 'employee'},
  requiredWhen: {field: 'employmentType', operator: 'notEquals', value: 'employee'}
}

Ejemplo detallado: lessThan

Cuando la Edad es menor a 18, Nombre del responsable se muestra y pasa a ser obligatorio.

{
  name: 'guardianName',
  label: 'Nombre del responsable',
  type: 'text',
  visibleWhen: {field: 'age', operator: 'lessThan', value: 18},
  requiredWhen: {field: 'age', operator: 'lessThan', value: 18}
}

Ejemplo detallado: notIn

Cuando el Tipo de entrega no es Retiro ni Digital, Dirección de entrega se muestra y pasa a ser obligatoria.

{
  name: 'deliveryAddress',
  label: 'Dirección de entrega',
  type: 'text',
  visibleWhen: {field: 'deliveryType', operator: 'notIn', value: ['pickup', 'digital']},
  requiredWhen: {field: 'deliveryType', operator: 'notIn', value: ['pickup', 'digital']}
}

Reglas estructurales básicas

• field debe referenciar un field existente.
• Un field no puede condicionarse a sí mismo.
• operator debe estar soportado.
• in y notIn requieren un array no vacío.
• greaterThan y lessThan requieren un value numérico.

Nota sobre tipos

Las comparaciones booleanas son estrictas. Para números, DYONA Form permite que el valor en edición llegue temporalmente como un string numérico y lo compara numéricamente.

Próximos pasos

• Schema
• Validation
• Todos los operadores de condiciones soportados actualmente están cubiertos arriba.