Displaying semantic ui form errors

semantic-ui needs an error class on the form to properly style the errors not shown inline.

To solve this, first create a app/components/do-form/semantic.js file with the following contents:

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

Now use the new do-form/semantic component in your templates to get the specific behaviour

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

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 that you can achieve this behaviour just by tweaking the feedback classes inline or globally.