[FEATURE] error configuration on a per form and per field basis

Author: Nils Henning

.byebug_history

@@ -1,4 +1,63 @@
 continue
+page.html
+continue
+!(@included_config[:errors] == false && (errors == false || errors.nil?) || errors == false)
+continue
+!(@included_config[:errors] == false && (errors == false || errors.nil?) || errors == false)
+@included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
+continue
+@included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
+@included_config[:errors] == false && errors == false || errors == false
+@included_config[:errors] == false || errors == false
+@included_config[:errors] == false
+@included_config[:errors]
+@included_config[:errors] != false && errors.present?
+errors != false
+false.present?
+errors != false
+|| errors != false
+@included_config[:errors] != false && errors.present?
+@included_config[:errors] != false && errors
+@included_config[:errors] != false
+(@included_config[:errors])
+errors != false
+errors
+(@included_config[:errors] != false && errors.present?)
+continue
+(@included_config[:errors] != false && errors.present?)
+@included_config[:errors]
+errors
+(@included_config[:errors] != false && errors.present?) || errors != false
+continue
+(@included_config[:errors] != false && errors.present?) || errors != false
+continue
+nil != false
+(@included_config[:errors] == false && !errors.present?)
+(@included_config[:errors])
+(@included_config[:errors] == false && !errors.present?)
+continue
+page.html
+continue
+hash[:errors]
+hash.is_a?(Hash)
+hash.keys
+hash
+keys
+continue
+save_screenshot
+page.html
+continue
+save_screenshot
+page.html
+continue
+save_screenshot
+page.html
+continue
+page.methods
+page.errors
+page.html
+save_screenshot
+continue
 save_screenshot
 page.html
 continue
@@ -195,62 +254,3 @@ self
 continue
 self
 continue
-self
-continue
-self
-continue
-page.html
-continue
-save_screenshot
-continue
-save_screenshot
-continue
-path
-::Rails.application.routes.url_helpers.send(property_path, params)
-property_path.is_a? Symbol
-property_path
-continue
-save_screenshot
-continue
-save_screenshot
-continue
-page.html
-continue
-save_screenshot
-page.html
-continue
-save_screenshot
-page.html
-continue
-page.html
-continue
-save_screenshot
-continue
-save_screenshot
-continue
-save_screenshot
-continue
-prop.flatten
-prop
-continue
-prop
-continue
-prop.flatten
-prop.flatten!
-prop.flatten
-prop.keys.first
-prop.keys
-prop
-prop.flatten
-prop
-prop.key
-prop.values.first[:alias]
-prop.values.first[:alias
-prop.values.first
-prop.values
-prop.first
-prop[:alias]
-prop.is_a? Hash
-self.class.requires_properties
-continue
-self.class.requires_properties

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

@@ -13,7 +13,7 @@ def error_key
   # error partial
   # overwrite render_errors to customize error rendering
   def render_errors
-    unless errors == false
+    unless @included_config[:errors] == false && (errors == false || errors.nil?) || 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 }}'
@@ -23,23 +23,32 @@ def render_errors
   end
 
   def wrapper_tag
-    tag = errors.is_a?(Hash) ? errors.dig(:wrapper, :tag) : :span
-    tag || :span
+    tag = get_error_config(@included_config[:errors], :wrapper, :tag) || :span
+    tag = get_error_config(errors, :wrapper, :tag) || tag
   end
 
   def wrapper_class
-    klaas = errors.is_a?(Hash) ? errors.dig(:wrapper, :class) : 'errors'
-    klaas || 'errors'
+    klass = get_error_config(@included_config[:errors], :wrapper, :class) || 'errors'
+    klass = get_error_config(errors, :wrapper, :class) || klass
   end
 
   def error_tag
-    tag = errors.is_a?(Hash) ? errors.dig(:tag) : :span
-    tag || :span
+    tag = get_error_config(@included_config[:errors], :tag) || :span
+    tag = get_error_config(errors, :tag) || tag
   end
 
   def error_class
-    tag = errors.is_a?(Hash) ? errors.dig(:class) : 'error'
-    tag || 'error'
+    klass = get_error_config(@included_config[:errors], :class) || 'error'
+    klass = get_error_config(errors, :class) || klass
+  end
+
+  def input_error_class
+    klass = get_error_config(@included_config[:errors], :input, :class) || 'error'
+    klass = get_error_config(errors, :input, :class) || klass
+  end
+
+  def get_error_config(hash, *keys)
+    hash.dig(*keys) if hash.is_a?(Hash) && hash.dig(*keys)
   end
 
 end

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

@@ -22,7 +22,8 @@ def vue_attributes
       (options[:attributes] || {}).merge({
         "@change": change_event,
         ref: "input.#{attr_key}",
-        'init-value': init_value
+        'init-value': init_value,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }"
       }).merge(
         type != :file ? { "#{v_model_type}": input_key } : {}
       ) # file inputs are readonly, no v-model possible

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

@@ -18,6 +18,7 @@ def vue_attributes
       (options[:attributes] || {}).merge({
         'v-model': input_key,
         '@change': "inputChanged('#{attr_key}')",
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
         "init-value": init_value,
         ref: "input.#{attr_key}",
       })

docs/components/form.md

@@ -842,10 +842,12 @@ form_input key: :foo, type: :text, errors: false
 
 ##### Customizing default rendering
 
-You can customize errors by passing `errors` with a hash.
+You can customize errors by passing `errors` with a hash to a input, textarea, select component or to a form component.
 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.
 
+Configuring errors on a per form field basis
+
 ```ruby
 form_input key: :foo, type: :text, errors: { tag: :div, class: 'my-error' }
 ```
@@ -868,6 +870,38 @@ Outputs errors as:
 </div>
 ```
 
+Configuring errors on a per form basis. Per form field configs take precedence over the form config.
+
+```ruby
+def response
+  form form_config do
+    form_input key: :foo, type: :text
+    form_input key: :bar, type: :text, errors: false
+  end
+end
+
+def form_config
+  {
+    for: :my_model,
+    #[...]
+    errors: {
+      wrapper: { tag: :div, class: 'my-errors' },
+      input: { class: 'my-error' }
+      tag: :div,
+      class: 'my-field-error'
+    }
+  }
+```
+Outputs errors as:
+```html
+<input type="text" class="my-field-error" />
+<div class="my-errors">
+  <div class="my-error">seems to be invalid</span>
+</div>
+<input type="text" class="my-field-error" /> <!-- without any errors, because its config takes precedence over the form config -->
+```
+
+
 ### 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: