Vue-formulate: Option to prevent a FormulateInput from registering on a FormulateForm

[gahabeen]

What and why
You'll see it soon enough but we're building a complex form builder and as FormulateInput wraps quite a bit of logic we tend to use it even for standalone fields within a FormulateForm definition, even though we don't want to register them as part of the form (they're configuration fields which interact with the form in other ways).

How?
By adding a standalone: Boolean (defaulted to false) on FormulateInput?

I've tried to implement it but somehow my tests fails.
I'll provide some code tomorrow.

[gahabeen]

Seems like I found a way. Implemented it within vue-formulate-extended.

I can now do:

<FormulateForm v-model="formData" :schema="[{type: 'text', name: 'name'}]">
   <FormulateInput type="checkbox" v-model="formData.required" :standalone="true" :name="false" />
</FormulateForm>

And because of standalone=true and name=false it won't get registered :)

See the full unit-test below:
https://github.com/gahabeen/vue-formulate-extended/blob/013ed58d91208009a9a6803ddfcd0604a9081178/tests/unit/features/FormulateInput.spec.js#L60-L72

See the standalone boolean prop within the FormulateInput: https://github.com/gahabeen/vue-formulate-extended/blob/013ed58d91208009a9a6803ddfcd0604a9081178/src/components/FormulateInput.vue#L114

[justin-schroeder]

interesting. So youre saying you want inputs inside a <FormulateForm> that don't register with the form registry correct? Interesting...I had never considered that, but I can see the use case. Seems like it would be fairly easy to implement too. I'll tag this for future inclusion.

[justin-schroeder]

@hmaesta just filed the same issue #262 for the ignored prop.

I'm wondering if we should be even more explicit with it than standalone or ignored. In 2.4.4 we introduced keep-model-data as a prop for a somewhat related thing. The name is a bit long and verbose, but I think it makes it really clear what it's doing. Any opinions on this one?

<FormulateInput
  type="text"
  :no-model="true"
/>

Some other verbose options:

• prevent-model-data
• dont-model
• ignore-model
• ignore-data
• unregistered

...etc. Anyone have an opinion on this (@andrew-boyd, @hmaesta, @gahabeen etc) ?

[hmaesta]

1. no-model props gives me the idea that I can't have a v-model on this input – which is not true, for example:

<FormulateInput v-model="searchQuery" :no-model="true">

2. I like unregistered, but unregistered="true" is kind of _not semantic_ for me. I would prefer registered="false"

3. But, besides all options, I still prefer ignored="true" 😬 _(But no pride at all, I go with whatever you guys thinks it's best.)_

[justin-schroeder]

Ah, good point on the model word. I like ignored too. Lets just leave the floor open to suggestions until it comes time to implement 👍

[andrew-boyd]

I agree with @hmaesta, either ignored or registered="false" with the default being registered="true". Maybe we could also consider a naming convention here as well as a shorthand? If I name my field name="_icon" the _ prefix could indicate that it's only for my use and I don't want it in my model data.

[andrew-boyd]

Another idea: Given the aversion to model being in the name of the prop (I agree) I also feel like private or internal would give me the right impression about the behavior. private would signify to me "this will not be included in your final form data". internal feels like a bit more of a stretch but I could make the connection.

Edit: exclude also feels self-explanatory.

<FormulateInput v-model="searchQuery" private>

<FormulateInput v-model="searchQuery" internal>

<FormulateInput v-model="searchQuery" exclude>

[justin-schroeder]

This is now in place on the release/2.5.0 branch (using an ignored prop)