added dynamic IDs for form components and labels in context of dynamically added nested forms

Author: jonasjabari

lib/matestack/ui/vue_js/components/form/base.rb

@@ -34,7 +34,11 @@ def error_config
             end
 
             def id
-              ctx.id || key
+              if ctx.id.present?
+                "'#{ctx.id}'"
+              else
+                "'#{key}'+$parent.nestedFormRuntimeId"
+              end
             end
 
             def multiple
@@ -50,7 +54,7 @@ def placeholder
             def attributes
               (options || {}).merge({
                 ref: "input.#{attribute_key}",
-                id: id,
+                ":id": id,
                 type: ctx.type,
                 multiple: ctx.multiple,
                 placeholder: ctx.placeholder,

lib/matestack/ui/vue_js/components/form/checkbox.rb

@@ -37,13 +37,13 @@ def vue_props
             def render_checkbox_options
               checkbox_options.to_a.each do |item|
                 input checkbox_attributes(item)
-                label item_label(item), for: item_id(item)
+                label item_label(item), ":for": item_id(item)
               end
             end
 
             def checkbox_attributes(item)
               {
-                id: item_id(item),
+                ":id": item_id(item),
                 type: :checkbox,
                 name: item_label(item),
                 value: item_value(item),
@@ -57,9 +57,9 @@ def checkbox_attributes(item)
             end
 
             def render_true_false_checkbox
-              input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
-              input true_false_checkbox_attributes.merge(type: :checkbox, id: item_id(1))
-              label input_label, for: item_id(1) if input_label
+              input true_false_checkbox_attributes.merge(type: :hidden, ":id": nil, value: 0)
+              input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1))
+              label input_label, ":for": item_id(1) if input_label
             end
 
             def true_false_checkbox_attributes
@@ -88,18 +88,18 @@ def checkbox_options
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
 
             def item_id(item)
-              "#{id}_#{item_value(item).to_s.gsub(" ", '_')}"
+              "#{id}+'_#{item_value(item).to_s.gsub(" ", '_')}'"
             end
 
           end
         end
       end
     end
   end
-end
+end

lib/matestack/ui/vue_js/components/form/form.js

@@ -19,7 +19,8 @@ const componentDef = {
       hideNestedForm: false,
       nestedFormRuntimeTemplates: {},
       nestedFormRuntimeTemplateDomElements: {},
-      deletedNestedNewInstanceFormsCount: {}
+      deletedNestedNewInstanceFormsCount: {},
+      nestedFormRuntimeId: ""
     };
   },
   methods: {
@@ -359,9 +360,10 @@ const componentDef = {
     if (this.props["fields_for"] != undefined) {
       this.isNestedForm = true;
 
-      var id = parseInt(self.$el.id.replace("child-", ""))
+      var id = parseInt(self.$el.id.replace("child-", ""));
+      this.nestedFormRuntimeId = Math.floor(Math.random() * 1000);;
 
-      this.data = {}
+      this.data = { "_destroy": false };
 
       //initialize nestedForm data in parent form if required
       if(this.$parent.data[this.props["fields_for"]] == undefined){

lib/matestack/ui/vue_js/components/form/input.rb

@@ -8,7 +8,7 @@ class Input < Matestack::Ui::VueJs::Components::Form::Base
 
             def response
               div class: 'matestack-ui-core-form-input' do
-                label input_label, for: id if input_label
+                label input_label, ":for": id if input_label
                 input input_attributes
                 render_errors
               end
@@ -34,4 +34,4 @@ def vue_props
       end
     end
   end
-end
+end

lib/matestack/ui/vue_js/components/form/radio.rb

@@ -16,7 +16,7 @@ def response
             def render_options
               radio_options.to_a.each do |item|
                 input radio_attributes(item)
-                label item_label(item), for: item_id(item)
+                label item_label(item), ":for": item_id(item)
               end
             end
 
@@ -33,7 +33,7 @@ def vue_props
 
             def radio_attributes(item)
               attributes.merge({
-                id: item_id(item),
+                ":id": item_id(item),
                 name: item_name(item),
                 value: item_value(item),
                 type: :radio,
@@ -51,13 +51,13 @@ def radio_options
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
 
             def item_id(item)
-              "#{id || key}_#{item_value(item)}"
+              "#{id || key}+'_#{item_value(item)}'"
             end
 
             def item_name(item)
@@ -73,4 +73,4 @@ def v_model_type
       end
     end
   end
-end
+end

lib/matestack/ui/vue_js/components/form/select.rb

@@ -8,7 +8,7 @@ class Select < Matestack::Ui::VueJs::Components::Form::Base
 
             def response
               div class: 'matestack-ui-core-form-select' do
-                label input_label, for: id if input_label
+                label input_label, ":for": id if input_label
                 select select_attributes do
                   render_options
                 end
@@ -39,7 +39,7 @@ def vue_props
             def select_attributes
               attributes.merge({
                 multiple: multiple,
-                id: id,
+                ":id": id,
                 ref: "select#{'.multiple' if multiple}.#{key}",
                 'value-type': value_type(select_options.first),
                 'init-value': init_value,
@@ -57,7 +57,7 @@ def select_options
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
@@ -85,4 +85,4 @@ def disabled_options
       end
     end
   end
-end
+end

lib/matestack/ui/vue_js/components/form/textarea.rb

@@ -8,7 +8,7 @@ class Textarea < Matestack::Ui::VueJs::Components::Form::Base
 
             def response
               div class: 'matestack-ui-core-form-textarea' do
-                label input_label, for: id if input_label
+                label input_label, ":for": id if input_label
                 textarea textarea_attributes
                 render_errors
               end
@@ -34,4 +34,4 @@ def vue_props
       end
     end
   end
-end
+end