make form errors customizable

Author: Nils Henning

CHANGELOG.md

@@ -400,6 +400,14 @@ And use it in your view as follows:
 To render existing rails views inside your components or pages use the new `rails_view` component. It replaces the old `html` component.
 You can render existing partials and views with this helper anywhere in your app. For further information read the `rails_view` documentation.
 
+### Changed Components
+
+#### Form Input Component
+
+The `form_input` component no longer supports the input type textarea. 
+Textareas were extracted in a component and can be used with `textarea` or in forms with `form_textarea`.
+The `form_input`component now supports all types according to W3Cs possible types.
+
 ### Removed Components
 
 #### Inline Component

app/concepts/matestack/ui/core/form/has_errors.rb

@@ -0,0 +1,45 @@
+module Matestack::Ui::Core::Form::HasErrors
+
+  def self.included(base)
+    base.class_eval do
+      optional :errors
+    end
+  end
+
+  def error_key
+    "errors['#{key.to_s}']"
+  end
+
+  # error partial
+  # overwrite render_errors to customize error rendering
+  def render_errors
+    unless errors == false
+      self.send(wrapper_tag, class: wrapper_class, attributes: { 'v-if': error_key }) do
+        self.send(error_tag, class: error_class, attributes: { 'v-for': "error in #{error_key}" }) do
+          plain '{{ error }}'
+        end
+      end
+    end
+  end
+
+  def wrapper_tag
+    tag = errors.is_a?(Hash) ? errors.dig(:wrapper, :tag) : :span
+    tag || :span
+  end
+
+  def wrapper_class
+    klaas = errors.is_a?(Hash) ? errors.dig(:wrapper, :class) : 'errors'
+    klaas || 'errors'
+  end
+
+  def error_tag
+    tag = errors.is_a?(Hash) ? errors.dig(:tag) : :span
+    tag || :span
+  end
+
+  def error_class
+    tag = errors.is_a?(Hash) ? errors.dig(:class) : 'error'
+    tag || 'error'
+  end
+  
+end

app/concepts/matestack/ui/core/form/input/input.haml

@@ -1,7 +1,9 @@
 require_relative '../utils'
+require_relative '../has_errors'
 module Matestack::Ui::Core::Form::Input
   class Input < Matestack::Ui::Core::Component::Static
     include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
 
     html_attributes :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
       :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
@@ -13,9 +15,7 @@ class Input < Matestack::Ui::Core::Component::Static
     def response
       label text: input_label if input_label
       input html_attributes.merge(attributes: vue_attributes)
-      span class: 'errors', attributes: { 'v-if': error_key } do
-        span class: 'error', text: '{{ error }}', attributes: { 'v-for': "error in #{error_key}" }
-      end
+      render_errors
     end
 
     def vue_attributes

app/concepts/matestack/ui/core/form/input/input.rb

@@ -17,9 +17,7 @@
     - if options[:options].is_a?(Array)
       - options[:options].each do |option|
         %option{value: option}=option
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
+  = render_errors
 
 - if options[:type] == :checkbox
 
@@ -46,9 +44,7 @@
         name: value,
         value: value}/
         %label{for: id_for_option(value)}=value
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
+  = render_errors
 
 - if options[:type] == :radio
 
@@ -75,6 +71,4 @@
         name: "#{attr_key}_#{value}",
         value: value}/
         %label{for: id_for_option(value)}=value
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
+  = render_errors

app/concepts/matestack/ui/core/form/select/select.haml

@@ -1,6 +1,11 @@
+require_relative '../utils'
+require_relative '../has_errors'
 module Matestack::Ui::Core::Form::Select
   class Select < Matestack::Ui::Core::Component::Static
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
 
+    requires :key
     requires options: { as: :select_options }
 
     def setup
@@ -9,21 +14,13 @@ def setup
       end
     end
 
-    def input_key
-      'data["' + options[:key].to_s + '"]'
-    end
-
-    def error_key
-      'errors["' + options[:key].to_s + '"]'
-    end
-
     def attr_key
-      options[:key].to_s
+      key.to_s
     end
 
     def option_values
-      values = options[:options] if options[:options].is_a?(Array)
-      values = options[:options].keys if options[:options].is_a?(Hash)
+      values = select_options if select_options.is_a?(Array)
+      values = select_options.keys if select_options.is_a?(Hash)
       return values
     end
 
@@ -47,16 +44,16 @@ def init_value
       end
 
       unless options[:for].nil?
-        value = options[:for].send(options[:key])
+        value = options[:for].send(key)
         if [true, false].include? value
           value ? 1 : 0
         else
           return value
         end
       else
         unless @included_config.nil? && @included_config[:for].nil?
-          if @included_config[:for].respond_to?(options[:key])
-            value = @included_config[:for].send(options[:key])
+          if @included_config[:for].respond_to?(key)
+            value = @included_config[:for].send(key)
             if [true, false].include? value
               value ? 1 : 0
             else
@@ -67,7 +64,7 @@ def init_value
               return nil
             end
             if @included_config[:for].is_a?(Hash)
-              return @included_config[:for][options[:key]]
+              return @included_config[:for][key]
             end
           end
         end
@@ -78,6 +75,5 @@ def id_for_option value
       return "#{@tag_attributes[:id]}_#{value}"
     end
 
-
   end
 end

app/concepts/matestack/ui/core/form/select/select.rb

@@ -1,17 +1,17 @@
 require_relative '../utils'
+require_relative '../has_errors'
 module Matestack::Ui::Core::Form::Textarea
   class Textarea < Matestack::Ui::Core::Textarea::Textarea
     include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
 
     requires :key
     optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
 
     def response
       label text: input_label if input_label
       textarea html_attributes.merge(attributes: vue_attributes)
-      span class: 'errors', attributes: { 'v-if': error_key } do
-        span class: 'error', text: '{{ error }}', attributes: { 'v-for': "error in #{error_key}" }
-      end
+      render_errors
     end
 
     def vue_attributes

app/concepts/matestack/ui/core/form/textarea/textarea.rb

@@ -4,10 +4,6 @@ def input_key
     "data['#{key.to_s}']"
   end
 
-  def error_key
-    "errors['#{key.to_s}']"
-  end
-
   def input_wrapper
     case input_for
     when nil

app/concepts/matestack/ui/core/form/utils.rb

@@ -647,7 +647,7 @@ end
 
 ### Example 4: Multiple input fields of different types
 
-Of course, our input core component accepts not only 'text', but very different input types: In this example, we will introduce 'password', 'number', 'email', 'range', 'textarea' types!
+Of course, our input core component accepts not only 'text', but very different input types: In this example, we will introduce 'password', 'number', 'email', 'range' types!
 
 On our example page, we define the input fields, together with a `type: X` configuration:
 
@@ -662,7 +662,6 @@ class ExamplePage < Matestack::Ui::Page
         form_input id: 'password-input',  key: :password_input, type: :password
         form_input id: 'number-input',    key: :number_input, type: :number
         form_input id: 'range-input',     key: :range_input, type: :range
-        form_input id: 'textarea-input',  key: :textarea_input, type: :textarea
         form_submit do
           button text: 'Submit me!'
         end
@@ -822,6 +821,53 @@ end
 
 If we head to `localhost:3000/example`, and fill in the input field with, e.g., *text* and click the submit button, we will get displayed our error message of `seems to be invalid`. Neat!
 
+#### Customizing error rendering
+
+Error messages are rendered in a span with class 'error' wrapped by another span with class 'errors'. You can customize the error rendering or deactivate it on a per component basis.
+
+For the above example the correspoding html looks like:
+```html
+<span class="errors">
+  <span class="error">seems to be invalid</span>
+</span>
+```
+
+###### Deactivate default error rendering
+
+Passing `errors: false` to a form input, select, textarea etc. will disable the default error rendering.
+
+```ruby
+form_input key: :foo, type: :text, errors: false
+```
+
+##### Customizing default rendering
+
+You can customize errors by passing `errors` with a hash.
+Customize the error tag by including a `tag` key with a symbol representing a html tag and the error class by including a `class`
+key with a string.
+
+```ruby
+form_input key: :foo, type: :text, errors: { tag: :div, class: 'my-error' }
+```
+Outputs errors as:
+```html
+<span class="errors">
+  <div class="my-error">seems to be invalid</div>
+</span>
+```
+
+By providing a `wrapper` key inside the errros hash you can customize the wrapper the same way you can customize the errors.
+
+```ruby
+form_input key: :foo, type: :text, errors: { wrapper: { tag: :div, class: 'my-errors-wrapper' } }
+```
+Outputs errors as:
+```html
+<div class="my-errors-wrapper">
+  <span class="error">seems to be invalid</span>
+</div>
+```
+
 ### Example 9: Mapping the form to an Active Record Model
 
 To test the mapping of our form to an Active Record Model, we make sure our `TestModel`'s description can't be empty: