useViewStrategy not working

[lobo-tuerto]

Right now the documentation mentions this:

config.useViewStrategy(viewStrategyInstance)

(config) => {
  config.useViewStrategy(ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput); 
}

But the app fails with this error: Unhandled promise rejection TypeError: Cannot read property 'TWBootstrapAppendToInput' of undefined.

Is the documentation out of date?

[SamDeBlock]

I used import {TWBootstrapViewStrategy} from 'aurelia-validation/strategies/twbootstrap-view-strategy';

and then (config) => { config.useViewStrategy(TWBootstrapViewStrategy.AppendToInput) })

and then everything works. So I think the docs are out of date :)

[lobo-tuerto]

Ahh, that works. Thank you!

[plwalters]

@lobo-tuerto Are all issues resolved? Can you either PR the improper docs or let me know where the issues are so I can fix them?

[lobo-tuerto]

@PWKad Yes, I didn't get more errors. Sorry, can't make a PR right now :(

But the docs need updating here: https://github.com/aurelia/validation/blob/master/doc/Intro.md#configuseviewstrategyviewstrategyinstance

[plwalters]

This needs to be fixed when templating docs move over to the new repo

[johnmanko]

I'd also like to see documentation on how to create a custom view strategy. Additionally, this process seems overly complex. Why not extend the validation API to allow the specification of a DOM element, just like how you allow the custom message?

I can see two different ways to improve things.

First, through the API:

import {Validation} from 'aurelia-validation';
export class Person {
  static inject() { return [Validation];}
  constructor(validation) {
    this.firstName = 'John';
    this.validation = validation.on(this)
      .ensure('firstName')
        .isNotEmpty()
        .withMessage("First Name is required, man! Come on.")
        .hasLengthBetween(3,10)
        .withMessage("We only like short names.")
        /* 
         All edits will be put into the element specified by intoElement. Params include
         1. The DOM element
         2. Flag to append into (for reuse with other fields), replace into, or repeat into (list of edits, like over an li element)
        */
        .intoElement("firstNameEditMessage", SOME_FLAG); 
  }
}

Another, and better way, is maybe something directly in the template:

<template>
  <form role="form" validate.bind="validation">
    <div class="form-group">
      <label>First Name</label>
      <div class="blah" validation.for="firstName" name="firstNameEditMessage"></div>
      <input type="text" value.bind="firstName" class="form-control">
    </div>
  </form>
</template>

Also keep in mind that some use case will require ALL edit messages for a given form to be a list for display, say in a modal. The framework should be smart enough to be dumb enough.

<template>
  <form name="someForm" role="form" validate.bind="validation">
    <div class="blah">
      <ul>
             <li validation.for="someForm">
      </ul>
   </div>
    <div class="form-group">
      <label>First Name</label>
      <input type="text" value.bind="firstName" class="form-control">
    </div>
  </form>
</template>

In my opinion, the code/framework should have no logic in determining where the message goes beyond a reference supplied by the template. It's a poor design otherwise. So, the second suggestion is better. Then you can avoid this whole strategy nonsense.

[plwalters]

Thanks for submitting this / commenting on this. At this time we are closing this because we have completely re-written and are deprecating the previous feature set. If you feel this should be re-opened please feel free to review this blog post and submit either again on this repository, or on the new validatejs bridge repository

Thanks again!

[johnmanko]

@PWKad Thanks Patrick. I'll take a look at aurelia-validatejs this week.