Dynamic Form Scope

Is there a way to give a form a dynamic scope?

Example:

<div v-for="(item, index) in items">
 <form :data-scope="index">
 </form>
</div>

Each form will receive an id of index. It seems like it doesn’t evaluate the value.

[pbastowski]

@arlando Dynamic scope already works, see http://codepen.io/pbastowski/pen/bBovBO?editors=1000.

This way of using validation scope is a bit long winded, in my opinion. Validation scope could be bound to the scope of the v-for instance or to a component’s scope or the current Vue instance scope.

Alternatively, data-vv-scope, named or blank, could simply create a new validation scope that is used to isolate the validations within it. Each usage of data-vv-scope would isolate the validations defined within it to that one scope.

This approach would be simpler, as in less code to type, than to keep specifying the scope with each errors.has(), errors.first(), errors.any(), etc…

All calls to .has, .any and .first assume the last used data-vv-scope:

// frm is an array of objects:   let frm = [ { email: '' }, { email: '' } ]
form.col-xs-6(v-for="f in frm", data-vv-scope="")
    label email
    input(v-model="f.email", v-validate="", name="email", data-vv-rules="required|email")
    button(:disabled="errors.any()") Submit
    p.text-danger(v-if="errors.has('email')") {{ errors.first('email') }}

Or even simpler, we imply the scope from the v-for instance, ss you can see in the example below. You would not have to use data-vv-scope at all, because it would be implied. data-vv-scope could still be optionally supplied for certain specific edge cases, however.

form.col-xs-6(v-for="f in frm")
    label email
    input(v-model="f.email", v-validate="", name="email", data-vv-rules="required|email")
    button(:disabled="errors.any()") Submit
    p.text-danger(v-if="errors.has('email')") {{ errors.first('email') }}

What do you guys think?

And for my final blasphemous suggestion I offer the example below. The only line that has changed is the one with the input on it.

form.col-xs-6(v-for="f in frm")
    label email
    input(v-model="f.email", v-validate="required|email", name="email")
    button(:disabled="errors.any()") Submit
    p.text-danger(v-if="errors.has('email')") {{ errors.first('email') }}

In the above example I used the v-validate directive to specify the validation rules, instead of using a separate data-vv-rules attribute. This is a breaking change, for sure. However, since we are using the name attribute anyway, the v-validate attribute looks kind of under-used.

Anyway, just some food for thought.

[pbastowski]

I like your new proposed v-validate syntax with the directive arguments. Very concise, indeed.

As for implied scope, validations declared inside of (inner) components and lower validation scopes will take care of their own specific validations, as required, and have their own implied or explicit scope (if we declare it by name).

We could borrow from AngularJS, which uses an ng-form="scope" or <form name="scope">...</form> to create validation scopes. So, each form has its own validation scope and if there is no form tag then the ng-form directive can be used to create a new validation scope. See the codepen example below that shows how this works, including nested and repeated forms. All validations in the forms are scoped only to that form.

http://codepen.io/pbastowski/pen/KNZwpK?editors=1010

I don’t know how familiar you are with Angular forms validation, so, I’ll make some comments on that below.

The first two forms have different scope names, so, all field names are unique within each scope. That’s why I can use name=“email”.

The repeated forms inside the second form, the scope is always called “scope”. It still works, because Angular keeps the validation results on the scope of the component/controller that the validations appear in. Because each repeated form has its own scope, the validations are stored on that scope, which is why there is no name conflict. However, radio button elements that share the same name must be surrounded by their own forms, which is why I used an ng-form instead of form to declare the validation scope. So, for this reason (wrapping radio buttons), perhaps form elements should not create their own validation scope, unless a name attribute is also specified.

Now, thinking more about this, perhaps using an implied scope is not the best idea, because it could be confusing sometimes. So, perhaps data-vv-scope is required after all (or vv-form or vv-scope) to allow us to define the scope explicitly.

So, if what I just said above was to be true, then the only things to change would be

1. the concise new v-validate syntax and
2. the removal of the need to specify the scope in .has(), .first(), etc, functions when they appear inside a declared scope.