Disable Validation Until The Form is in Use

[peterje]

Describe the problem statement?

I am using this lib in Vuejs and I wish to disable validation when the form is empty. When users load the page, the form is already complaining about bad input which is not appealing.

What I have tried

I tried setting :error-messages to a custom getter:

  email_error(){
    if(this.user_form.props.email.length === 0)
      return ""
    return this.user_form.controls.email.errorMessage
  }

and this seemed to get rid of the error message. However, the text box is still in the red error state on load. Is there a proper solution to this?

Code

Component snippet:

      <v-text-field
        required
        label="Username"
        v-model="user_form.props.username"
        :error-messages="user_form.controls.username.errorMessage"
        outlined
      />
      <v-text-field
        label="Email"
        v-model="user_form.props.email"
        :error-messages="user_form.controls.email.errorMessage"
        outlined
      />
      <v-text-field
        v-model="user_form.props.password"
        type="password"
        :error-messages="user_form.controls.password.errorMessage"
        label="Password"
        required
        outlined
      />

Model snippet:

import {email, alpha, minLength, required } from "@rxweb/reactive-forms"
export class UserForm {
  @alpha()
  @minLength({value: 5})
  @required()
  username: string

  @minLength({value: 5})
  @required()
  password: string

  @minLength({value: 5})
  @required()
  @email()
  email: string

  constructor() {
    this.username = ''
    this.password = ''
    this.email = ''
  }
}

[peterje]

Bump?