feat(useField): rule checking and status management of fields
LittleSound opened this issue · 0 comments
LittleSound commented
Rule validation and state management of form fields are placed in a separate input component, which can be used alone or in combination with the main useForm
Code Demo:
Maybe there will be a better way to design?
<!-- MyForm.vue -->
<script setup>
import { useForm, toField } from 'slimeform'
const { form, status, isError } = useForm({
form: () => ({
phone: '+86****',
}),
rule: {
phone: [
// Additional rules for purpose of business logics
]
},
})
</script>
<InputPhone v-model="form.phone" :field="toField(form, 'phone')" />
<!-- InputPhone.vue -->
<script setup>
import { useField } from 'slimeform'
const props = defineProps()
const emits = defineEmits()
const vmPhone = useVModel(props, 'modelValue', emits)
const { field: phone, state, isError, reset } = useField(vmPhone, props.field, {
rule: [
// As for mobile phone number input validations, there can be general rules
phoneFormat(),
phoneLength(),
]
})
</script>