input :valid & :invalid pseudo-classes not being set appropriately

[oskanberg]

Expected Behaviour

The CSS3 :valid and :invalid pseudo-classes are applied correctly when using Angular in-built form validation. CSS rules that apply to these elements work out of the box for angular forms that are using .ng-valid and .ng-invalid. I would expect angular-schema-form to manage these states correctly too.

Actual Behaviour

When using input validation with angular-schema-form, inputs appear to always be :valid, even if a field is invalid.

To demonstrate, see the basic form on schemaform.io.

1. Cause the validation on any of the fields to fail.
2. Call $('input:valid') in the developer console.
3. Observe that the invalid (with .ng-invalid) is still returned.

Unfortunately this means that CSS frameworks that require :valid, :invalid states are not natively supported by angular-schema-form.

I am happy to tackle this issue if someone can point me in the right direction.

Thanks!

[Anthropic]

@oskanberg thanks for the example. I'd love some help in finding out what angular does to handle it.

[oskanberg]

I'm afraid I am not familiar with how Angular sets this property. I have had a quick dig in the source to find it, but it's a difficult topic to search for.

I know there is a HTML5-spec API for setting form validity that is probably what we need, but would need a polyfill for older browsers.

[Anthropic]

This is what is required as linked above
element.setCustomValidity('I make it invalid')
element.setCustomValidity('') // I make it valid

Still not sure why Angular isn't handling it with ASF as Angular has a wrapper for this:
$setValidity(validationErrorKey, isValid);