validate customForm and increment position

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -24,7 +24,11 @@
             @blur="updateStore"
           />
           <small>{{ form.label.help_text }}</small>
-          {{ form.label.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.label.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
 
         <div class="required field">
@@ -39,9 +43,14 @@
             @blur="updateStore"
           />
           <small>{{ form.name.help_text }}</small>
-          {{ form.name.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.name.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
       </div>
+
       <div class="three fields">
         <div class="required field">
           <label :for="form.position.id_for_label">{{
@@ -58,8 +67,13 @@
             />
           </div>
           <small>{{ form.position.help_text }}</small>
-          {{ form.position.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.position.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
+
         <div class="required field">
           <label :for="form.field_type.id_for_label">{{
             form.field_type.label
@@ -70,7 +84,13 @@
             :selected="selectedFieldType"
             :selection.sync="selectedFieldType"
           />
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.field_type.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
+
         <div
           v-if="selectedFieldType === 'Liste de valeurs'"
           class="field field-list-options required field"
@@ -87,7 +107,11 @@
             class="options-field"
           />
           <small>{{ form.help_text }}</small>
-          {{ form.options.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.options.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -120,7 +144,7 @@ export default {
       form: {
         dataKey: 0,
         label: {
-          errors: null,
+          errors: [],
           id_for_label: "label",
           label: "Label",
           help_text: "Nom en language naturel du champ",
@@ -131,7 +155,7 @@ export default {
           value: null,
         },
         name: {
-          errors: null,
+          errors: [],
           id_for_label: "name",
           label: "Nom",
           html_name: "name",
@@ -143,7 +167,7 @@ export default {
           value: null,
         },
         position: {
-          errors: null,
+          errors: [],
           id_for_label: "position",
           label: "Position",
           min_value: 0, // ! check if good values (not found)
@@ -153,10 +177,10 @@ export default {
           field: {
             max_length: 128, // ! check if good values (not found)
           },
-          value: 0,
+          value: this.customForm.dataKey - 1,
         },
         field_type: {
-          errors: null,
+          errors: [],
           id_for_label: "field_type",
           label: "Type de champ",
           html_name: "field_type",
@@ -164,10 +188,10 @@ export default {
           field: {
             max_length: 50,
           },
-          value: null, //* field to send to the backend
+          value: "boolean",
         },
         options: {
-          errors: null,
+          errors: [],
           id_for_label: "options",
           label: "Options",
           html_name: "options",
@@ -246,6 +270,21 @@ export default {
       // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation
       return string.replace(/\s*,\s*/gi, ",");
     },
+    checkCustomForm() {
+      console.log("checkCustomForm");
+      console.log(this.form);
+      if (this.form.label.value === null) {
+        this.form.label.errors = ["Veuillez compléter ce champ."];
+        return false;
+      } else if (this.form.name.value === null) {
+        this.form.name.errors = ["Veuillez compléter ce champ."];
+        this.form.label.errors = [];
+        return false;
+      }
+      this.form.label.errors = [];
+      this.form.name.errors = [];
+      return true;
+    },
   },
 
   beforeDestroy() {