Validation States

[SteveShaffer]

Basically, I think it'd be cool to implement this stuff in this library using hasError, ng-messages, $error, etc. I have a working implementation in a project with custom bootstrap templates that I can pull from, but I'll need to make it a little more bootstrap-standard.

I think part of the problem with this is that, while bootstrap's validation state styling (.has-success, .has-error, etc.) for outlining the controls and coloring the labels is pretty straightforward, how error messages are done (in the case of the docs, it uses the help-block) are far from standard. Even in my own fairly bootstrap-standard project, I've pulled the errors out into tooltips instead of inline help-blocks so the form isn't constantly resizing. Nevertheless, I think just including <p>s or <span>s in the help-block would be a pretty good default go-by.

Any thoughts?

[SteveShaffer]

Ok I just realized there's totally already a hasError wrapper in here. So I guess this is now mainly just about reporting error messages via ng-messages and $error.

[benoror]

@SteveShaffer yeah, it's just matter of extending the functionality to support .has-warning & .has-success

You might help us by submitting a PR, o even better, along with a JSBin example for the website :smile:

[kentcdodds]

I wonder if it would be better to implement this in a separate plugin where the class names are configurable so it could be used with more than just bootstrap :-)

[benoror]

+1 @kentcdodds that would be better!

@SteveShaffer there are some plugin examples available if you're up to the challenge :smile:

[mavrick]

This is also related to issue https://github.com/formly-js/angular-formly-templates-bootstrap/issues/46

[SteveShaffer]

Ya I might be up to the challenge. I'll add it to my todo list.

@kentcdodds What do you have in mind in terms of a "plugin"? Like a separate project or something like a manipulator in angular-formly or something else? Even with the class names configurable, it'll likely still make some pretty bootstrap-specific assumptions about the structure of the DOM (although there's technically not much guidance on what "standard" bootstrap-style validation help text is).

I've been toying with using tooltips instead of inline DOM elements so the forms don't grow and collapse as the errors turn on and off. Perhaps we could use some simple-enough tooltips that they could work with any framework?

[kentcdodds]

You, different project, maybe a manipulator or wrapper, however you want to do it (I'd probably do a manipulator because I like them better than wrappers). You might do something like this

[immortalcy]

As a quick solution I came up with the following custom wrapper:

formlyConfigProvider.setWrapper({
      name: 'bootstrapHasErrorHasSuccess',
      template: [
        "<div class=\"form-group\" ng-class=\"{'has-error': showError, 'has-success': (fc.$modelValue || fc.$viewValue) && fc.$dirty && !showError}\">",
        "<formly-transclude></formly-transclude>",
        "</div>"
      ].join(' ')
    });

[kentcdodds]

That's very similar to this wrapper which is built-in to the bootstrap templates. But you've added some custom functionality for your use case which is exactly what angular-formly is meant to allow you to do :+1:

[immortalcy]

@kentcdodds Angular formly actually helped us a lot. I just wish I had more time and experience to be able to contribute as well.