'How to reset the form validation on a create modal?

I am not sure what I should do here in this case. When I click on + Rule, I call this fn()

showAddRuleModal() {
    this.showAddRule = true

    this.$refs.form.reset()

    //reset form values
    this.ruleName = ''
    this.url = 'https://www.'
    this.urlType = 'Single'

    this.ruleDetails = []

    let ruleDetail = {
        attribute_id: '',
        operator_id: '',
        value: ''
    }

    this.ruleDetails.push(ruleDetail)
}

As you can see in the image, I successfully created a rule, and tried to add one more.

As you can see the other values seems to reset but my ruleName input detected as an error even if I reset this.$refs.form.reset()

How can I stop this ?

Note

If I add a space to the default value

this.ruleName = ' '

that error is gone, but now, my form ruleName contains a space. Works, but it's not great.

Solution 1:^[1]

after the modal is opened use this:

this.$refs.form.resetValidation()

this should reset the validation. documentation example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	hamid niakan

'How to reset the form validation on a create modal?

Note

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]