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