if.bind support

[brettveenstra]

per @PWKad 's comment on https://github.com/aurelia/validation/issues/218, wondering if anyone has hit the if.bind issue with the new approach

[taz]

I couldn't get this working unfortunately using the new code released today.

Use case: I have an email field which is only shown when a "Contact Me" checkbox is ticked. By default it is not ticked and the email field is not in the DOM.

When it is ticked, the email field is added to the DOM and it should be set to 'required' and validated as a valid email address.

Result: When the checkbox is ticked, I get the error 'A ValidationController has not been registered'.

I've tried a couple of different approaches to get this to work.

• The first is a stock standard set of decorators on the bound variable.
• The second was an observer on the checkbox value, that added a validator via the fluent syntax, when it was set to true.

Each time I got the same ValidationController error. I'm assuming that & validate on the value.bind is being evaluated before the validation plan has been attached to the variable in the class?

I spoke with @jsobell on Gitter about this briefly this morning and he suggested what (I think) would essentially be a mash up of my second method above and a delayed manual validate call, but this seems quite clunky, and could cause some ambiguity in the html template (ie is the field validated, or not?) if the only way to make it function was to remove & validate. Honestly I'm not even sure that would work now that I 'type it out loud' :-).

I'll continue to play around with it and see if I can come up with anything better while we wait for the dev's to chime in on it... Maybe I've missed something obvious! :-)

[jdanyow]

supported in new version

[taz]

@jdanyow I couldn't get this to work in 0.5.0 as of this morning (which is what my comment was referring to). :( Is there a newer version?

If not, when you have a chance, I'd appreciate it if you could point me in the right direction to achieve dynamically adding/removing form elements via if.bind that have validation rules applied to them...

Simply defining the variable in the class and putting a decorator on it doesn't seem to work.

[jdanyow]

ok- re-opening, please use the gist from yesterday's blog post to create a sample of what you're trying to achieve and we can look into it.

[taz]

Ok, first things first, this gistrun will fail. It doesn't matter if the variable contactMe is initially set to true or false.

If you look in the dev console, you'll see an error along the lines of "A ValidationController has not been registered".

I've removed all the input fields from the gistrun except for an email address and a checkbox. The checkbox controls whether or not the email field is added to the DOM.

It's a fairly contrived example where I'm asking the user if they want to be contacted or not. If they do, then they must give me an email address.

https://gist.run/?id=f1b95899dadb4a389b59bc5ccf990bfb

This is the method that feels intuitive to me, that's not to say it's correct! :-)

[jsobell]

This is an example of a user-defined rule, based on two fields. The condition is checkbox.checked & input.isEmail with a message of "%{value} is not a valid email", which requires some sort of @validationFn(() => { expression }) where a false return is considered a validation failure. In treacherous I would pass in a custom function as a Promise based rule, but unless the validation system supports at least function based rules (independent of the property), and preferably Promise based ones, I don't see an easy workaround.

[jdanyow]

I'm adding the bug label because this error is a bug:

A ValidationController has not been registered

I will get that fixed asap but I think we may need to open another issue to discuss promise based stuff...

[jdanyow]

ok here's a gist with the bug-fixes monkey patched in... https://gist.run/?id=b6a9e4785b9a15c526aec5197b5c8207

[taz]

Initial play looks solid!

I'll give it more thorough testing throughout the day and let you know if I find anything out of place.

Nice work, thanks alot!