Access form/field errors within a custom input

[quimarche]

I'm trying to enable/disable submit buttons depending on the validation status of other fields in the form. How might I do this? i.e. which property or chain of properties can I access to determine the validation status?

[justin-schroeder]

Coming Soon

@quimarche Good question, the short answer, is that there isn't a great way to do this at this precise moment, but 2.3 should be coming out soon with elegant support for these kinds of features using scoped slots, and named forms. For that reason I'll close this as a duplicate of #34, but its a solid request.

Current State

That said, it is possible today, just not super "pretty".

<template>
<FormulateForm
  ref="form"
  @input="checkValidation"
>
 ... inputs here ...
  <FormulateInput
    :disabled="hasErrors"
    type="submit"
  />
</FormulateForm>
</template>

<script>
export default {
  data () {
    hasErrors: false
  },
  methods: {
    async checkValidation () {
      // Even better if you debounce this a bit
      this.hasErrors = await this.$refs.form.hasValidationErrors()
    }
  }
}
</script>

Let me know if you have other issues with this.

[fidelix]

How would this be done more cleanly in 2.3+ ?

[justin-schroeder]

@fidelix we pushed the features related to this (originally planned for 2.3/2.4) down the road a bit.

[chrisyeung1121]

Wonder if it is still developing?