n-form validation status reactive

[AlexZCP]

This function solves the problem (这个功能解决的问题)

Validation status of whole form that can be used for disabling submit buttons, etc

Expected API (期望的 API)

Currently n-form-item has a validationErrored reactive field to check if it passed validation or not.
It would be great to have analogical field for whole form.

However, if there is an alternative way to make disabled submit button whole it's not valid, point me please.

Concept example:

    <n-form ref="formRef" :model="model" :rules="rules">
      <n-form-item label="Label A" path="fieldA">
        <n-input v-model:value="model.fieldA" />
      </n-form-item>
      <n-form-item label="Label B" path="fieldB">
        <n-input v-model:value="model.fieldB" />
      </n-form-item>
     <n-button :disabled="formRef.validationErrored">Submit</n-button>
    </n-form>

[07akioni]

Currently it would be very complex and you will need to take over form's validation.

I think we should somehow provide a way to achieve it.

[mrhammadasif]

You can use something like

// import {computedAsync} from "@vueuse/core"
const isValid = computedAsync(async () => {
  return formRef.value && formRef.value?.validate().then(o => true).catch(e => false)
}, false)

but that will always trigger validate state for you

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem