Form submit without hydro-bind

[NeggieDK]

When i submit a form i except the formdata to be present in the request without using hydro-bind. But in my testing this doesn't work. In the documentation we have to following example:

public class ProductForm : HydroComponent
{
    [Required, MaxLength(50)]
    public string Name { get; set; }
    
    public async Task Submit()
    {
        if (!Validate())
        {
            return;
        }
        
        // your submit logic
    }
}

@model ProductForm

<form hydro-on:submit="@(() => Model.Submit())">
  <label asp-for="Name"></label>
  <input asp-for="Name"/>
  <span asp-validation-for="Name"></span>  

  <button type="submit">Submit</button>
</form>

As you can see, there is no hydro-bind attribute in the input element. If I press the submit button, the Name property is empty. If i add hydro-bind, I can see that everytime the input value changes, hydro will post and update the Name property. In my opinion this is overkill because I only need the value on submit.

Is there a way to do this?

[kjeske]

Hi! The docs should contain hydro-bind in there, so I will fix them. Good catch and sorry for the confusion.

When it comes to submitting the form values without using binding is for now not possible, due to the way how the component lifecycle works. On each bind you can perform some custom logic, and also validate the field with instant feedback, like red validation message. I will think about possible solutions here, but fore now putting there hydro-bind is the only way.

Just to clarify, the request with new value will be triggered by default only when the field looses focus after the change, so not on each key stroke.

[taublast]

I think we solved this, a fix is upcoming.. Need to test with files and this will be covered :)

        //your action called upon form submit:
        public async Task Submit()
        {
            //manually
            var email = this.Request.Form["Data.Email"];

            //auto!
            var success = await BindFormAsync(this.Data);

            //and can access file via `Request.Form.Files`

Went to #76