De eerste keer dat ik kennismaakte met Ruby on Rails was ik behoorlijk weggeblazen. Het was de eerste programmering kader dat ik leerde en ik moet zeggen dat ik een beetje verliefd. Ik had net geleerd hoe ik applicaties moest bouwen met behulp van Sinatra en vond het een behoorlijk geweldige tool, maar toen zag ik wat Rails kon doen…
Een belangrijke functie van Rails die ik echt leuk vond om te gebruiken was de From Helpers. Het stelde me in staat om te voorkomen dat het uitschrijven van alle HTML op te bouwen een vorm, en op zijn beurt gaf me de mogelijkheid om meer complexe functies te doen. In dit artikel ga ik breken over de verschillende vorm helpers die in Rails en zelfs aan te raken op een nieuwe die werd gelanceerd in de Rails 5.1 release.
Creëren formulieren met HTML kan een overlast zijn op keer, vooral als ze extra lang met veel te veel invoervelden. Ze kunnen nog lastiger worden als je het formulier nodig hebt om gegevens naar een specifieke api endpoint te sturen of om te worden gekoppeld aan een database model. Hier is een html formulier om een gebruiker aan te maken:
<form class="new_user" action="/users" method="post">
<label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User">
</form>
Zoals je kunt zien, kan het schrijven van dit alles vrij snel complex worden. Als je goed kijkt naar het formulier kun je zien dat we een actie en methode attribuut doorgeven aan ons formulier om een nieuwe gebruiker aan te maken. Dit is geweldig en zo, maar Rails is super kieskeurig als het gaat om het indienen van formulieren. Dit specifieke formulier zou het niet halen als het werd ingediend. Dit is waar Formulier helpers komen om te redden.
Form Helpers
Toen ik voor het eerst leerde hoe je Formulier helpers gebruikt, kon ik eerlijk gezegd niet geloven wat ze deden. Zoals je zag in het vorige formulier dat we deden, kost het wat tijd en complexiteit om dit te bereiken. Echter, met formulier helpers kan dit worden bereikt met veel minder werk en met heel wat “magie”.
Er zijn drie verschillende helpers die ons helpen om snelle en nuttige formulieren te bouwen in Rails, form_tag, form_for, en form_with. De laatste, form_with, werd geïntroduceerd in de release van Rails 5.1 en combineert in wezen de vorige twee helpers.
form_tag
De form_tag is de meest elementaire van de helpers en op zijn beurt doet minder “magie” voor je. Het bouwt nog steeds het formulier voor je op, maar je moet explicieter zijn bij het declareren van url-paden en wordt vooral gebruikt als het formulier niet is gekoppeld aan een Controller#action. Laten we als voorbeeld een standaard zoekformulier gebruiken:
<%= form_tag("/search", method: "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>
Dit genereert de volgende HTML:
<form accept-charset="UTF-8" action="/search" method="get">
<input name="utf8" type="hidden" value="✓" />
<label for="q">Search for:</label>
<input name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>
Zoals je kunt zien, declareren we de route die we willen dat de formulier parameters worden doorgegeven in de form_tag. Je kunt dit zien gebeuren in de regel <%= form_tag("/search", method: "get") do %> en je kunt ook zien dat we het http verzoek specificeren. Dit is nog steeds pretty awesome en je kunt zien dat Rails zorgt voor een veel voor ons, zelfs in het basisformulier helper, maar Rails heeft een meer krachtige versie van deze …
form_for
Form_for is het echte werk. Deze helper stelt ons in staat om een formulier te binden aan een object, waardoor we een object kunnen maken / bewerken. Zoals we zagen in het form_tag voorbeeld, moesten we expliciet zijn in welk url-pad te gebruiken voor het verzenden van de formulier parameters, maar form_for staat ons toe om dit weg te abstraheren. Hier is een voorbeeld:
<%= form_for @user do |f| %> <%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit %><% end %>
Dit zal dezelfde code opleveren die we zagen in ons eerste voorbeeld van een html formulier.
<form class="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token"
value="QPJXa5iS/XNvodHhpcwV5q42RoGFWsmZkwL3ATHFfeKqxZ8IQsLs1QjJvcrdO3BwCaOfQ4TxNLDD0b6VbxiACg=="> <label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User"></form>
Je kunt meteen zien hoeveel schoner deze code eruit ziet met form_for. Eerlijk gezegd is het een beetje verbazend dat zo’n kleine code al die html kan maken, maar het doet het echt! Je kunt in de eerste regel van form_for zien dat we een instantie variabele van de gebruiker doorgeven die dit formulier aan dat object zal koppelen. Het andere leuke van het doorgeven van deze variabele is dat Rails zelf op zoek gaat naar het juiste url-pad, in tegenstelling tot de form_tag waar we expliciet moesten vertellen waar we de data heen moesten sturen.
form_with
- Maybe talk about form_with and about it’s use
- Gebruik code snippets voor voorbeeld
Als je kijkt naar de Ruby on Rails 5.1 Release Notes, is er een notitie dat form_for en form_tag worden verenigd in form_with. Het grootste voordeel met deze nieuwe helper is form_withkan formulier tags genereren op basis van URL’s, scopes of modellen
Laten we het eens bekijken!
form_with using URLs
Laten we hetzelfde voorbeeld gebruiken als in form_for en het met form_with toepassen door alleen een URL te gebruiken:
<%= form_with url: user_path do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>
Zoals u kunt zien lijkt het erg op de form_tag waar we een specifieke URL specificeren (user_path)
form_with using models
Het echt coole aan form_with is dat het ook kan worden gebruikt voor het doorgeven van model objecten, vergelijkbaar met form_for.
<%= form_with model: @user do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>
Dit maakt dezelfde HTML als form_for.
Het grootste voordeel van form_with is dat we ons geen zorgen meer hoeven te maken over de keuze tussen form_tag en form_for. We hebben een handige helper die ons in staat stelt om beide taken uit te voeren met slechts een schakelaar in de eerste regel van het gedeclareerde formulier.
Conclusie
Rails formulier helpers zijn geweldig en de nieuwe toevoeging van form_with brengt echt alle voordelen van zowel form_tag als form_for samen. U heeft nu een tool waarmee u een formulier kunt bouwen op basis van wat u nodig heeft. Of het nu een zoek formulier of een formulier om gegevens te persistente naar uw database, kunt u hebben verzorgd met Rails vorm helpers.
Ik zou ook aanraden te gaan door middel van de Rails Gidsen om te leren over het maken van meer complexe formulieren. Je hebt heel wat opties van het toestaan van een model om geneste attributen te accepteren, met geneste attributen, en andere vorm helpers om aangepaste invoervelden te creëren. Er is zo veel om mee te spelen bij het doornemen van deze docs dus profiteer ervan!
Happy Coding!