semantic-ui form error classes

[kevintraver]

It would be nice to be able to also extend the form classes.

For example, Semantic UI error messages only show up if the form itself also has a class of ui form error.

Thanks!

[stfcodes]

Hey @kevintraver,

This seems like a feature specific to semantic-ui only and I'd like to take a stab at it when I get some ideas on how to tackle theming support for this addon (suggestions welcome!).

In the meantime - and I'm not sure what your UX/UI needs are - you could extend the do-form component and bind the error validation class when submitting the form like so:

// app/components/semantic-do-form.js
import Ember from 'ember';
import DoFormComponent from 'ember-do-forms/components/do-form';

const {
  computed
} = Ember;

export default DoFormComponent.extend({
  classNameBindings: ['hasErrors:error'],
  
  // ember-cp-validations example
  hasErrors: computed.and('showAllValidations', 'object.validations.isInvalid')
});

And then you can use it like so:

{{#semantic-do-form model submit=(action 'saveTask') as |form|}}
  {{!-- Use just like a regular do-form --}}
  <button type='submit'>Save</button>
{{/semantic-do-form}}

Another suggestion would be to use inline error messages just like in their examples (the Reset / Clear Fields example). The cool thing about this is, you can achieve this just by tweaking the feedback classes inline or globally.

Hope this helps!

PS: This reminded me to add global classes configuration for the actual forms!

[kevintraver]

Thanks for the response and suggestions!