aerni / statamic-livewire-forms

Supercharge your Statamic forms with Livewire
https://statamic.com/addons/aerni/livewire-forms
Other
28 stars 2 forks source link

Hide label for hidden input field #23

Closed godismyjudge95 closed 1 year ago

godismyjudge95 commented 1 year ago

Hidden text inputs don't require labels, this change would hide the label area when the field type is "hidden".

aerni commented 1 year ago

What's your use case for a field with input_type: hidden? Do you need the field to be present but invisible on the frontend? Or can the field be removed from the frontend altogether?

I'm asking because there's already a show property you can use to completely remove the field from the frontend. But still have the field present for data purposes.

If you don't need the field on the frontend, I'd implement something smart to automatically apply show: false when input_type: hidden.

godismyjudge95 commented 1 year ago

I am using a hidden form field to_email which I then prefill on the browser side based on what page the form is embeded. This to_email field then gets parsed when the email notification is sent out.

I am not aware of another simple way of doing this (without getting into writing my own laravel notification email class).

I would imagine there could be other use cases where the hidden field would still need to be present on the frontend for javascript purposes.

Also sidenote, I wasn't using show on purpose since the client will need to make changes to the form and they will only be using the web interface - which looks to not have the show property?

aerni commented 1 year ago

Ok, I hear you. I actually don't remember why I decided to remove fields from the frontend when the show property is set to false. I think I intended it to be used for data that is added on the PHP side. But your use case makes much more sense.

I think I'll end up renaming show to render and adding a new property called hidden. The render property would remove the field from the frontend and the hidden property would simply hide it.

Does that make sense to you?

Also sidenote, I wasn't using show on purpose since the client will need to make changes to the form and they will only be using the web interface - which looks to not have the show property?

Yes, this property is not available in the blueprint editor.

godismyjudge95 commented 1 year ago

I think I'll end up renaming show to render and adding a new property called hidden. The render property would remove the field from the frontend and the hidden property would simply hide it.

Yeah that makes sense. Although I found out that a hidden field won't show on the view form entries, which is unfortunate. This means that there is no way to hide a field just on the front end in Statamic currently... maybe if I have enough time I can submit a pull request to Statamic core to fix it.

aerni commented 1 year ago

I am using a hidden form field to_email which I then prefill on the browser side based on what page the form is embeded. This to_email field then gets parsed when the email notification is sent out.

How did you set the value on the hidden field? Did you actually manage to do with this addon?

godismyjudge95 commented 1 year ago

I am using a hidden form field to_email which I then prefill on the browser side based on what page the form is embeded. This to_email field then gets parsed when the email notification is sent out.

How did you set the value on the hidden field? Did you actually manage to do with this addon?

So I ended up not doing it browser side, but instead extending the default form:

class ContactAgentForm extends \App\Http\Livewire\Form

Then in the extended form I added an extra field:

public string $agent_email;

Which I then prefilled on both the hydrateFields and submittingForm methods:

    protected function hydratedFields(Fields $fields): void
    {
        $fields->get('agent_email')->default($this->agent_email);
    }

    protected function submittingForm(): void
    {
        $this->data['agent_email'] = $this->agent_email;
    }

Reason for using both methods is because the hydrateFields gives javascript access to perform logic if needed in browser. And submittingForm overwrites any changes a nefarious actor may have made.

Finally, this field is then used in the Statamic form settings to determine the TO field.


The only issue still is that the field does not show when viewing the entry, but this is a minor inconvenience atm as the TO field isn't essential to the entry data.

aerni commented 1 year ago

Ok, cool. That's the preferred way to do it.

Reason for using both methods is because the hydrateFields gives javascript access to perform logic if needed in browser. And submittingForm overwrites any changes a nefarious actor may have made.

I don't think you need to do this. Livewire has security measures in place that should throw an error if you are trying to manipulate data from the frontend.

If you want to use the JS approach in the future, you can add a script in the form view like this:

<script>
    document.addEventListener('livewire:load', function () {
        @this.set('data.hidden_input', 'value')
    })
</script>

Make sure that the field, in this case, hidden_input, actually exists on the form blueprint. Else, the data will be stripped from the form submission.

aerni commented 1 year ago

I'm closing this PR in favor of PR #26.