force value at feature extraform mount & disable

src/components/Feature/Edit/FeatureExtraForm.vue

 <template>
-  <div v-if="field && field.field_type === 'char'">
+  <div
+    v-if="field && field.field_type === 'char'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -26,7 +29,10 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'list'">
+  <div
+    v-else-if="field && field.field_type === 'list'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -53,7 +59,10 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'pre_recorded_list'">
+  <div
+    v-else-if="field && field.field_type === 'pre_recorded_list'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -113,7 +122,10 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'multi_choices_list'">
+  <div
+    v-else-if="field && field.field_type === 'multi_choices_list'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -150,7 +162,10 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'integer'">
+  <div
+    v-else-if="field && field.field_type === 'integer'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -180,8 +195,11 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'boolean'">
-    <div class="ui checkbox">
+  <div
+    v-else-if="field && field.field_type === 'boolean'"
+    :class="{ disabled }"
+  >
+    <div :class="['ui checkbox', { disabled }]">
       <input
         :id="field.name"
         type="checkbox"
@@ -195,7 +213,10 @@
     </div>
   </div>
 
-  <div v-else-if="field && field.field_type === 'date'">
+  <div
+    v-else-if="field && field.field_type === 'date'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -222,7 +243,10 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'decimal'">
+  <div
+    v-else-if="field && field.field_type === 'decimal'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -252,7 +276,10 @@
     </ul>
   </div>
 
-  <div v-else-if="field && field.field_type === 'text'">
+  <div
+    v-else-if="field && field.field_type === 'text'"
+    :class="{ disabled }"
+  >
     <label
       v-if="displayLabels"
       :for="field.name"
@@ -307,6 +334,7 @@ export default {
 
   data() {
     return {
+      disabled: false,
       error: null,
       prerecordedListSearchQuery: null,
       loadingPrerecordedListValues: false,
@@ -393,9 +421,10 @@ export default {
   mounted() {
     this.checkDeactivatedValues(); // check when custom form appears on page
     // autoset field to false if is a boolean, since user doesn't need to select it, when false value is expected
-    if (this.field.field_type === 'boolean' && this.field.value === undefined) {
-      this.updateStore_extra_form({ target: { checked : false } });
+    if (this.field.field_type === 'boolean' && (this.field.value === undefined || this.field.value === null)) {
+      this.updateStore_extra_form(false);
     }
+    this.checkForcedValue();
   },
   
   destroyed() {
@@ -414,13 +443,18 @@ export default {
     updateStore_extra_form(evt) {
       if (this.field) {
         let newValue;
-        if (this.field.field_type === 'boolean') {
-          newValue = evt.target.checked; //* if checkbox use "checked"
-        } else if (this.field.field_type === 'multi_choices_list') {
+        if (evt && evt.target) { // if called from the template
+          if (this.field.field_type === 'boolean') {
+            newValue = evt.target.checked; //* if checkbox, use "checked"
+          } else {
+            newValue = evt.target.value;
+          }
+        } else if (this.field.field_type === 'multi_choices_list') { // special case where the value is stored in the state
           newValue = this.selectedMultipleCheckbox;
-        } else {
-          newValue = evt.target.value;
+        } else { // if the newValue was sent directly
+          newValue = evt;
         }
+
         //* set the value selected
         if (this.isConditionalField) {
           this.$emit('update:condition-value', newValue);
@@ -431,7 +465,24 @@ export default {
       }
     },
 
+    checkForcedValue() {
+      if (!this.field.forced_value_config || this.$route.name.includes('type-signalement')) return;
+      // loop over each forced value config for this extraForm
+      this.disabled = false;
+      for (const config of this.field.forced_value_config) {
+        // find the extraForm field conditioning the forced value
+        const conditioningField = this.extra_forms.find((xtraForm) => xtraForm.name === config.conditionField);
+        // if found check that its value match the condtionValue
+        if (conditioningField && conditioningField.value === config.conditionValue) {
+          // set this value with the forced value and disable the form field
+          this.updateStore_extra_form(config.forcedValue);
+          this.disabled = true;
+        }
+      }
+    },
+
     checkDeactivatedValues() {
+      if (this.$route.name.includes('type-signalement')) return;
       // if changes occured, update extra_forms array with freshly checked active customForms
       let newExtraForms = this.extra_forms.map((xForm) => { // we use 'deactivate' instead of 'activate' because at initialization this property cannot be evaluated ...
         const isDeactivated = !isXtraFormActive(this.extra_forms, xForm.conditional_field_config);  // ... if the component is not created to set this property, thus no extra form would appear at all