Modifiers

Modifiers are behaviours or settings letting you control how the rules will behave.

Deep modifiers

Deep modifiers can be defined as 3rd argument of the useRegle composable. They will apply recursevely for all the fields in your state.

const {regle} = useRegle({}, {}, {"
"})

autoDirty

Type: boolean

Default: true

Allow all the nested rules to track changes on the state automatically. If set to false, you need to call $touch to manually trigger the change

lazy

Type: boolean

Default: false

Usage:

When set to false, tells the rules to be called on init, otherwise they are lazy and only called when the field is dirty.

externalErrors

Type: RegleExternalErrorTree<State>

Pass an object, matching your error state, that holds external validation errors. These can be from a backend validations or something else.

import { type RegleExternalErrorTree, useRegle } from '@regle/core'

const form = reactive({
  email: '',
  name: {
    pseudo: '',
  }
})

const externalErrors = ref<RegleExternalErrorTree<typeof form>>({});

const {errors, resetAll, regle} = useRegle(form, {
  email: {required},
  name: {pseudo: {required}}
}, {
  externalErrors
})

function submit() {
  externalErrors.value = {
    email: ["Email already exists"],
    name: {
      pseudo: ["Pseudo already exists"]
    }
  }
}

Result:

rewardEarly

Type: boolean

Turn on the reward-early-punish-late mode of Regle. This mode will not set fields as invalid once they are valid, unless manually triggered by or $validate method

validationGroups

Type: (fields) => Record<string, (RegleFieldStatus |RegleCollectionStatus)[]>

Validation groups let you merge fields properties under one, to better handle validation status.

You will have access to your declared groups in the regle.$groups object

import { useRegle } from '@regle/core';
import { required } from '@regle/rules';

const {regle, errors} = useRegle({email: '', user: {firstName: ''}}, {
  email: {required},
  user: {
    firstName: {required},
  }
}, {
  validationGroups: (fields) => ({
    group1: [fields.email, fields.user.$fields.firstName]
  })
})

regle.$groups.group1.

Per-field modifiers

Per-field modifiers allow to customize more precisely which behaviour you want for each field

const {regle} = useRegle({name: ''}, {
  name: {$
}
})

$autoDirty $lazy and $rewardEarly work the same as the deep modifiers

$debounce

Type: number

This let you declare the number of milliseconds the rule need to wait before executing. Useful for async or heavy computations