0

My project's logic is this.

  1. I have an HTML form with a <select multiple> inside that contains a list of String
  2. With an Angular.js function I fill a event-dialog-controller.js variable with selected String
  3. I take that variable called vm.usernames and I set it as value of an <input type="hidden">
  4. I call a REST service with form's data using Spring
  5. Spring automatically converts the input in an object of Event class
  6. What I see in the end is that object

My issue is that the field that should get the vm.usernames value is empty in my REST. I checked up if vm.usernames is correct when I call the form (using console.log(vm.usernames)), it's correct.

How could I fix this problem?

HTML code:

<div class="form-group">
    <label for="field_attendeestoparse">{{vm.usernames}}</label>
    <select class="form-control" multiple ng-model="vm.attendeesToParse" ng-change="vm.selectUsernames(vm.attendeesToParse)"
                    ng-options="customUser as customUser.username for customUser in vm.customusers | orderBy:'id' ">
    </select>
    <input class="form-control" type="hidden" name="attendees" id="field_attendees" ng-model="vm.event.attendees" ng-value="vm.usernames" />

</div>

I don't paste here my Angular function because I am sure that it does what it has to do.

A little note. If I use an <input type="text"> with the same attributes as <input type="hidden"> and I insert values from keyboard, it works perfectly. I don't know why that hidden does not send that value.

All the other Event's fields work perfectly.

I know I am missing something, please help me!

Gozus19
  • 165
  • 19

1 Answers1

0

I finally solved the problem. It's a pleasure to share the solution, maybe it should be helpful for someone.

I created a new <input type="text" disabled>, with Angular.js' function I fill it with selected options and then I send the form. In other words, when I click on options they are automatically set as values in input text.

It works really fine, maybe it's not the best semantic solution but it solves the problem and works, so I think to use this version of code.

HTML code:

<div class="form-group">
    <label for="field_attendees">Attendees</label>
    <select class="form-control" multiple ng-model="vm.attendeesToParse" ng-change="vm.selectUsernames(vm.attendeesToParse)"
                    ng-options="customUser as customUser.username for customUser in vm.customusers | orderBy:'id' ">
    </select>
    </br>
    <input disabled type="text" class="form-control" name="attendees" ng-model="vm.event.attendees" id="field_attendees" />
</div>

angular.js controller:

$scope.usernames = '';
    vm.selectUsernames = function(model) {
        $scope.usernames = "";
        for (var i = 0; i < model.length; i++) {
            $scope.usernames += model[i].username + " ";
        }
        vm.event.attendees = $scope.usernames;
};
Gozus19
  • 165
  • 19