Conditions

O DYONA Form permite alterar declarativamente o comportamento do formulário conforme o valor de outro field.

Experimente ao vivo

Quer ver essas condições declarativas reagindo em tempo real?

Abrir Conditions no Lab →

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

A aplicação consumidora não precisa implementar if, useState nem JSX condicional para mostrar ou ocultar o field. O DYONA Form avalia a condição usando os values atuais do formulário.

DyonaFieldCondition

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

• field é o nome do field cujo valor é observado.
• operator é a comparação que o DYONA Form realiza.
• value é o valor esperado ou a coleção de valores, conforme o operator.

visibleWhen

visibleWhen controla se um field deve ser exibido.

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

Quando a condição é true, o field é exibido; quando é false, fica oculto. visible: false tem prioridade absoluta e mantém o field oculto mesmo se visibleWhen for true.

requiredWhen

requiredWhen torna um field obrigatório somente quando sua condição é atendida.

{
  name: 'taxId',
  label: 'Identificação fiscal',
  type: 'text',
  visibleWhen: {field: 'customerType', operator: 'equals', value: 'company'},
  requiredWhen: {field: 'customerType', operator: 'equals', value: 'company'}
}

visibleWhen e requiredWhen podem usar a mesma condição. Um field também pode ser obrigatório por required: true ou por uma validation required; consulte Validation para esses mecanismos.

Operadores disponíveis

Operator	Significado	value esperado
equals	O valor atual é igual ao esperado.	Escalar
notEquals	O valor atual é diferente do esperado.	Escalar
greaterThan	Comparação numérica maior que.	Número
lessThan	Comparação numérica menor que.	Número
in	O valor atual pertence a uma coleção.	Array não vazio
notIn	O valor atual não pertence a uma coleção.	Array não vazio

Exemplo detalhado: equals

Quando customerType equals "company", Razão social e Identificação fiscal são exibidos e passam a ser obrigatórios.

{
  name: 'customerType', label: 'Tipo de cliente', type: 'select', required: true,
  options: [{value: 'person', label: 'Pessoa'}, {value: 'company', label: 'Empresa'}]
},
{
  name: 'companyName', label: 'Razão social', type: 'text',
  visibleWhen: {field: 'customerType', operator: 'equals', value: 'company'},
  requiredWhen: {field: 'customerType', operator: 'equals', value: 'company'}
},
{
  name: 'taxId', label: 'Identificação fiscal', type: 'text',
  visibleWhen: {field: 'customerType', operator: 'equals', value: 'company'},
  requiredWhen: {field: 'customerType', operator: 'equals', value: 'company'}
}

Exemplo detalhado: greaterThan

Se o Valor do pedido superar 10.000, Motivo da aprovação aparece e se torna obrigatório.

{
  name: 'approvalReason',
  label: 'Motivo da aprovação',
  type: 'text',
  visibleWhen: {field: 'orderAmount', operator: 'greaterThan', value: 10000},
  requiredWhen: {field: 'orderAmount', operator: 'greaterThan', value: 10000}
}

Exemplo detalhado: in

Para Reembolso ou Crédito, Motivo da solicitação aparece e se torna obrigatório.

{
  name: 'requestReason',
  label: 'Motivo da solicitação',
  type: 'text',
  visibleWhen: {field: 'requestType', operator: 'in', value: ['refund', 'credit']},
  requiredWhen: {field: 'requestType', operator: 'in', value: ['refund', 'credit']}
}

Exemplo detalhado: notEquals

Quando o Tipo de contratação é diferente de Funcionário, Empresa contratada é exibida e passa a ser obrigatória.

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

Exemplo detalhado: lessThan

Quando a Idade é menor que 18, Nome do responsável é exibido e passa a ser obrigatório.

{
  name: 'guardianName',
  label: 'Nome do responsável',
  type: 'text',
  visibleWhen: {field: 'age', operator: 'lessThan', value: 18},
  requiredWhen: {field: 'age', operator: 'lessThan', value: 18}
}

Exemplo detalhado: notIn

Quando o Tipo de entrega não é Retirada nem Digital, Endereço de entrega é exibido e passa a ser obrigatório.

{
  name: 'deliveryAddress',
  label: 'Endereço de entrega',
  type: 'text',
  visibleWhen: {field: 'deliveryType', operator: 'notIn', value: ['pickup', 'digital']},
  requiredWhen: {field: 'deliveryType', operator: 'notIn', value: ['pickup', 'digital']}
}

Regras estruturais básicas

• field deve referenciar um field existente.
• Um field não pode condicionar a si mesmo.
• operator deve ser suportado.
• in e notIn exigem um array não vazio.
• greaterThan e lessThan exigem um value numérico.

Nota sobre tipos

Comparações booleanas são estritas. Para números, o DYONA Form permite que o valor em edição chegue temporariamente como uma string numérica e o compara numericamente.

Próximos passos

• Schema
• Validation
• Todos os operadores de condições suportados atualmente estão cobertos acima.