search

json-schema-form / angular-schema-form

Generate forms from a JSON schema, with AngularJS!
https://json-schema-form.github.io/angular-schema-form
MIT License
2.47k stars 653 forks source link

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

Open oskanberg opened 7 years ago

oskanberg commented 7 years ago

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 commented 7 years ago

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

oskanberg commented 7 years ago

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 commented 7 years ago

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);