Activity form: add required class name on required field built with vue

src/Bundle/ChillActivityBundle/Form/ActivityType.php

@@ -125,7 +125,9 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('socialIssues') && $accompanyingPeriod) {
-            $builder->add('socialIssues', HiddenType::class);
+            $builder->add('socialIssues', HiddenType::class, [
+                'required' => $activityType->getSocialIssuesVisible() === 2
+            ]);
             $builder->get('socialIssues')
                 ->addModelTransformer(new CallbackTransformer(
                     static function (iterable $socialIssuesAsIterable): string {
@@ -151,7 +153,9 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('socialActions') && $accompanyingPeriod) {
-            $builder->add('socialActions', HiddenType::class);
+            $builder->add('socialActions', HiddenType::class, [
+                'required' => $activityType->getSocialActionsVisible() === 2
+            ]);
             $builder->get('socialActions')
                 ->addModelTransformer(new CallbackTransformer(
                     static function (iterable $socialActionsAsIterable): string {
@@ -338,7 +342,9 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('location')) {
-            $builder->add('location', HiddenType::class)
+            $builder->add('location', HiddenType::class, [
+                    'required' => $activityType->getLocationVisible() === 2
+                ])
                 ->get('location')
                 ->addModelTransformer(new CallbackTransformer(
                     static function (?Location $location): string {

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

@@ -1,7 +1,7 @@
 <template>
     <teleport to="#location">
         <div class="mb-3 row">
-            <label class="col-form-label col-sm-4">
+            <label :class="locationClassList">
                 {{ $t("activity.location") }}
             </label>
             <div class="col-sm-8">
@@ -41,6 +41,12 @@ export default {
         NewLocation,
         VueMultiselect,
     },
+    data() {
+        return {
+            locationClassList:
+               `col-form-label col-sm-4 ${document.querySelector('input#chill_activitybundle_activity_location').getAttribute('required') ? 'required' : ''}`,
+        }
+    },
     computed: {
         ...mapState(["activity", "availableLocations"]),
         ...mapGetters(["suggestedEntities"]),

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -3,7 +3,7 @@
 
       <div class="mb-3 row">
          <div class="col-4">
-            <label class="col-form-label">{{ $t('activity.social_issues') }}</label>
+            <label :class="socialIssuesClassList">{{ $t('activity.social_issues') }}</label>
          </div>
          <div class="col-8">
 
@@ -42,7 +42,7 @@
 
       <div class="mb-3 row">
          <div class="col-4">
-            <label class="col-form-label">{{ $t('activity.social_actions') }}</label>
+            <label :class="socialActionsClassList">{{ $t('activity.social_actions') }}</label>
          </div>
          <div class="col-8">
 
@@ -94,6 +94,10 @@ export default {
          issueIsLoading: false,
          actionIsLoading: false,
          actionAreLoaded: false,
+         socialIssuesClassList:
+            `col-form-label ${document.querySelector('input#chill_activitybundle_activity_socialIssues').getAttribute('required') ? 'required' : ''}`,
+         socialActionsClassList:
+            `col-form-label ${document.querySelector('input#chill_activitybundle_activity_socialActions').getAttribute('required') ? 'required' : ''}`,
       }
    },
    computed: {