Can Phalcon\Forms\Element\Select accept dynamically created values?

[richmilns]

I use form classes extensively throughout my Phalcon 4 projects.

Recently, I have been working on using Select2 JS with dynamic population of options (via an API endpoint). The problem I have is that when I bind the form data to the model, the new value of the select element does not get saved.

My thought is that because my form element has an empty array of select options ($users below), when the form gets validated and bound to my model instance, the new dynamic value (from my API endpoint) gets ignored because it was not one of the original options defined for my Select element in the form class. The value in the model record after validation remains unchanged, appearing to revert to the original value.

My form:

<?php

declare(strict_types=1);

namespace Members\Forms;

use Phalcon\Forms\Form;
use Phalcon\Forms\Element\Select;
use Phalcon\Mvc\Model;
use Phalcon\Mvc\Model\Exception;

class MemberForm extends Form
{
    /**
     * @param Model|null $model
     * @param array $options
     */
    public function initialize(?Model $model, array $options = [])
    {
        $this->setMethod('post');
        // user_id
        $users = [];
        $this->add((new Select('user_id', $users))
            ->setLabel('Assigned User')
            ->setAttribute('data-width', '100%')
        );
    }
}

Here is my volt view:

{{ form.start() }}
<fieldset class="card mb-3">
    <div class="form-group row">
        {{ form.label('user_id', ['class':'col-sm-4 col-xl-3 col-form-label']) }}
        <div class="col-sm-8 col-xl-9">
            {{ form.render('user_id') }}
        </div>
    </div>
</fieldset>

<div class="form-actions form-submit">
    <input type="submit" value="Save">
</div>

{{ form.end() }}

<script>

jQuery(function() {

$('#user_id').select2({
    theme: 'bootstrap4',
    ajax: {
        url: app.api.url + 'user_list',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                keywords: params.term,
                page: params.page
            };
        },
        processResults: function (response, params) {
            var formattedResults = [];
            for(var i in response.data) {
                formattedResults.push({
                    id: i,
                    text: response.data[i]
                });
            }
            return {
                results: formattedResults
            };
        },
        cache: true
    },
    placeholder: 'Search for a user',
    minimumInputLength: 1
});

});
</script>

When the form is submitted, my code to bind the POST data to my model looks pretty much like this:

$model = new Members();
$record = $model->findFirstById($id);
$form = new MemberForm($record);
if($this->request->isPost()) {
    $form->bind($this->request->getPost(), $record);
    if (!$form->isValid()) {
        throw new \Exception('Invalid data');
    }
    $record->update();
}
$this->view->form = $form;

Does anyone know if the value of a Select element has to be defined in the form class, or whether it can be dynamically set and saved as above?

As a quick test, I made user_id a Hidden element instead, and manually added HTML code for my Select2 dropdown (<select name="user_id" id="user_id2"></select>) in my view after user_id got rendered, and the dynamic value does get saved correctly.

[quasipickle]

What is getting POSTed? Is the form element that select2 is replacing getting submitted?

[richmilns]

Yes, it is getting submitted. My user_id value from the Select2 replacement is present in my $_POST data.

I debugged my code before and after the POST data is bound to the form ($form->bind()) and then saved - before binding, the value is correct, after binding and saving, the value has reverted back to the original for user_id.

If I make sure that an option exists in my Select('user_id', $options) form element definition code to match the chosen value in the Select2 replacement, it saves correctly.

To get around this, I've been manually coding the <select> HTML tag and using a Phalcon\Forms\Element\Hidden() element in my form class instead of Select() so that the binding/updating to the model works. Ugly but working.

I think there must be something in Phalcon's code that says "only pre-defined Select() options can be saved", which means working with Select2 and a remote data source is not possible?

[quasipickle]

If it really is the case that the <select> can only be bound with a pre-existing value, what if there were a way to set that value before form initialization?

I've never used this functionality, but what if you moved your field setup out of initialize() into a separately called method that could accept parameters? Something like:

class MyForm extends Form{
    public function initialize(?Model $model, array $options = [])
    {
        $this->setMethod('post');
    }
    public function initializeFields(['user_id'=>DEFAULT_USER_ID])
    {
        $this->add((new Select('user_id', [DEFAULT_USER_ID]))
            ->setLabel('Assigned User')
            ->setAttribute('data-width', '100%')
        );
    }
}

$model = new Members();
$record = $model->findFirstById($id);
$form = new MemberForm($record);
$form->initializeFields(['user_id',$this->request->getPost('user_id')]);// This'll just be NULL if nothing POSTed

if($this->request->isPost()) {
    $form->bind($this->request->getPost(), $record);
    if (!$form->isValid()) {
        throw new \Exception('Invalid data');
    }
    $record->update();
}
$this->view->form = $form;

[richmilns]

Thanks for the suggestion, I must admit that hadn't crossed my mind 🙂

Unfortunately, the result for me seems to be the same, although your suggestion did at least allow the value to be saved.

The issue is that when I need to then populate the current value of the user_id select (via the options parameters), I run into the same restrictions as I seemed to encounter in my first post. It seems to be that when you provide options to a Select entity in a form class, Phalcon dictates that the value saved to the model record has to be one of those options.

To get around this, I added a faux Hidden field to my form class instead of the Select so that the POST value could be bound to my model record:

$this->add((new Hidden('user_id'))
    ->setLabel('Assigned User')
);

And then in my Volt view, I can simply code a manual <select> element for Select2 to use:

{# I can still output the label, because I set it on the hidden field! #}
{{ form.label('user_id') }}
{# manual select2 element, form's hidden user_id field saves the value to the model #}
<select class="form-control" name="user_id" id="user_id" data-width="100%">
{% if current.user_id is not empty %}
{# setting the current select value #}
<option value="{{ current.user_id }}">{{ current.user_full_name }}</option>
{% endif %}
</select>

current is just an instance of the model data for this record, with a join onto my users table to get the full name.

You don't even need to output the hidden user_id via form.render(), it just works.

It works, but I feel like I need a shower now! 🤣 Not a very pleasant solution, but it's working at least, and not all my forms feature this kind of autocompletion.

But it would be nice if it worked, for sure.