Merge pull request #32 from alvarosaburido/feature/form_field_id_conf…

…igurable

Configurable id, default with form id to avoid duplicated ids

dev/App.vue

@@ -147,6 +147,7 @@ const data = () => ({
         customClass: 'col-12',
       }),
       new FormField({
+        id: 'number-custom-id',
         type: 'number',
         label: 'Number',
         name: 'number',

docs/guide/models.md

@@ -6,6 +6,7 @@ This is the principal instance containing the info of your field, as seen in sev
 
 ```javascript
 export function FormField({
+  id,
   type = 'text',
   value = null,
   validations = [],
@@ -17,6 +18,7 @@ export function FormField({
   placeholder = null,
   inline = false,
 }) {
+  this.id = id;
   this.type = type;
   this.value = value;
   this.validations = validations;
@@ -36,6 +38,7 @@ Tracks the value and validation status of an individual form control. `FormContr
 
 ```javascript
 export function FormControl({
+  id,
   type = null,
   value = null,
   validations = [],
@@ -49,6 +52,7 @@ export function FormControl({
   touched = false,
   dirty = false,
 }) {
+  this.id = id || `${form}-${name}`;
   this.type = type;
   this.value = value;
   this.validations = validations;

src/components/dynamic-form/DynamicForm.js

@@ -34,6 +34,7 @@ const methods = {
         field =>
           new FormControl({
             ...field,
+            form: this.id,
           }),
       );
   },
@@ -42,6 +43,7 @@ const methods = {
       field =>
         new FormControl({
           ...field,
+          form: this.id,
         }),
     );
   },
@@ -63,6 +65,7 @@ const methods = {
       field =>
         new FormControl({
           ...field,
+          form: this.id,
           valid: true,
           value: null,
           touched: false,

src/components/input-select/InputSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <select
-    :id="formControl.name"
+    :id="formControl.id"
     v-model="formControl.value"
     :name="formControl.name"
     class="form-control"

src/components/input-text/InputText.vue

@@ -1,6 +1,6 @@
 <template>
   <input
-    :id="formControl.name"
+    :id="formControl.id"
     v-model="formControl.value"
     :name="formControl.name"
     class="form-control"

src/components/input-textarea/InputTextarea.vue

@@ -1,6 +1,6 @@
 <template>
   <textarea
-    :id="formControl.name"
+    :id="formControl.id"
     v-model="formControl.value"
     :name="formControl.name"
     class="form-control"

src/core/utils/form-control.model.js

@@ -1,8 +1,10 @@
 export function FormControl({
+  id,
   type = null,
   value = null,
   validations = [],
   label = null,
+  form,
   name = null,
   customClass = null,
   options = [],
@@ -14,7 +16,9 @@ export function FormControl({
   touched = false,
   dirty = false,
 }) {
+  this.id = id || `${form}-${name}`;
   this.type = type;
+  this.form = form;
   this.value = value;
   this.validations = validations;
   this.label = label;
@@ -31,6 +35,7 @@ export function FormControl({
 }
 
 export function FormField({
+  id,
   type = 'text',
   value = null,
   validations = [],
@@ -44,6 +49,7 @@ export function FormField({
   rows = null,
   cols = null,
 }) {
+  this.id = id;
   this.type = type;
   this.value = value;
   this.validations = validations;