Auto-Validating Form
Enter a bad email or leave the password empty, and see how the form validates in real time!
This renders a normal Symfony
form but with extras added on top,
all generated from Symfony & Twig.
// ... use statements hidden - click to show
#[AsLiveComponent]
class RegistrationForm extends AbstractController
{
use ComponentWithFormTrait;
use DefaultActionTrait;
#[LiveProp]
public bool $isSuccessful = false;
#[LiveProp]
public ?string $newUserEmail = null;
protected function instantiateForm(): FormInterface
{
return $this->createForm(RegistrationFormType::class);
}
public function hasValidationErrors(): bool
{
return $this->getForm()->isSubmitted() && !$this->getForm()->isValid();
}
#[LiveAction]
public function saveRegistration()
{
$this->submitForm();
// save to the database
// or, instead of creating a LiveAction, allow the form to submit
// to a normal controller: that's even better.
// $newUser = $this->getFormInstance()->getData();
$this->newUserEmail = $this->getForm()
->get('email')
->getData();
$this->isSuccessful = true;
}
}
<div
{{ attributes }}
>
{% if isSuccessful %}
<div>Welcome {{ newUserEmail }}!</div>
{% else %}
{{ form_start(form, {
attr: {
novalidate: true,
'data-action': 'live#action:prevent',
'data-live-action-param': 'saveRegistration',
}
}) }}
{{ form_row(form.email) }}
{{ form_row(form.password) }}
{{ form_row(form.terms) }}
<button
type="submit"
class="btn btn-primary {{ this.hasValidationErrors ? 'disabled' : '' }}"
>Register</button>
{{ form_rest(form) }}
{{ form_end(form) }}
{% endif %}
</div>
Author
weaverryan
Published
2022-06-17