Feature request: change icon depending on whether input valid about angular-form-for

[bvaughn]

Interesting request @cissyshi! Let me take a look.

[bvaughn]

What would the API for this look like? I could imagine a couple of things...

• I could imagine exposing some kind of is-valid/has-error bindable attribute that you could watch and then update the before/after icon accordingly.
• Or I could imagine allowing you to specify different icons for error states, more like... before-icon-valid and before-icon-invalid.

I'm thinking the 2nd approach feels a little nicer, but I'd like others to weigh-in.

[cissyshi]

I think I like the second option better.
I could also see you allowing before-icon accepting two types like ng-class.

before-icon="some-icon"
or
before-icon="{valid: 'some-valid-icon', invalid: 'some-invalid-icon'}"

[bvaughn]

Ah! I like that suggestion.

[bvaughn]

Let's go with this:

<text-field attribute="email"
            icon-after="{pristine: 'fa fa-user', invalid: 'fa fa-times', valid: 'fa fa-check'}">
</text-field>

So you can specify a different icon for pristine, valid, and invalid states. (I think the addition of pristine is important since we don't want to show a check or an x for a field that hasn't been validated yet.)

[bvaughn]

Please disregard that previous commit. I pushed too soon and discovered a regression while testing.

[bvaughn]

This feature is available in 1.2.10.

Here is a working demo of the various ways field icons can now be assigned:
http://bvaughn.github.io/angular-form-for/#/demo/dynamic-icons

Thank you for suggesting this enhancement. :)