Understanding form helpers

1. Understanding Form Helpers
Bruno Almeida

2. ● Form tag
● Form to an object
● Select
● Customize fields
● Nested forms

3. Let’s begin

4. Form tag
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html

5. form_tag
<%= form_tag do %>
Form contents
<% end %>
<form action="/" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<input type="hidden" name="authenticity_token" value="
jzi1o/1Wl8yTZ2e1Z3QE99BFYI5uouuaFa/HdyyOJP9knHGBMpiGjuNlDP
VhctUX2/qQsFUxCaChV7JSgm0Mnw==" />
Form contents
</form>

6. label_tag, text_field_tag, submit_tag
<%= form_tag("/search", method: "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>
<form accept-charset="UTF-8" action="/search" method="get">
<input name="utf8" type="hidden" value="&#x2713;" />
<label for="q">Search for:</label>
<input id="q" name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>

7. Others input helpers
<%= password_field_tag(:password) %>
<%= hidden_field_tag(:parent_id, "5") %>
<%= number_field(:product, :price, in:
1.0..20.0, step: 0.5) %>
<input type="password" name="password" id="password" />
<input type="hidden" name="parent_id" id="parent_id"
value="5" />
<input step="0.5" min="1.0" max="20.0" type="number"
name="product[price]" id="product_price" />
search_field, telephone_field, date_field, datetime_field, datetime_local_field, month_field,
week_field, url_field, email_field, color_field, time_field, range_field

8. Form to an object
http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html

9. Setting up a form to an object
# routes
resources :developers
# controller
def new
@developer = Developer.new
end
# view
<%= form_for @developer do |f| %>
<%= f.text_field :name %><br>
<%= f.text_area :resume %><br>
<%= f.submit %>
<% end %>
<form class="new_developer" id="new_developer" action="/developers"
accept-charset="UTF-8" method="post">
<!-- autenticity_token and utf8 -->
<input type="text" name="developer[name]" id="developer_name" /><br>
<textarea name="developer[resume]" id="developer_resume">
</textarea><br>
<input type="submit" name="commit" value="Create Developer" />
</form>

10. Label
<%= f.label :name %><br>
<%= f.text_field :name %>
<label for="developer_name">Name</label><br>
<input type="text" name="developer[name]" id="developer_name" />

11. Error messages
# model
class Developer < ActiveRecord::Base
validates_presence_of :name
end
# view
<% if @developer.errors.any? %>
<ul>
<% @developer.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
<% end %>
<ul>
<li>Name can't be blank</li>
</ul>

12. Select
http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html

13. Select with array
<%= f.select(:gender, { M: 1, F: 2 },
{ include_blank: 'Choice' }) %>
<select name="developer[gender]" id="developer_gender">
<option value="">Choice</option>
<option selected="selected" value="1">M</option>
<option value="2">F</option>
</select>
<select name="developer[gender]" id="developer_gender">
<option selected="selected" value="1">M</option>
<option value="2">F</option>
</select>
<%= f.select(:gender, M: 1, F: 2) %>

14. Select with collection
<%= f.collection_select(:indication_id,
Developer.all, :id, :name,
{ prompt: 'None' }) %>
<select name="developer[indication_id]" id="
developer_indication_id">
<option value="">None</option>
<option value="1">Linus</option>
<option value="2">Bruno</option>
</select>
<select name="developer[indication_id]" id="
developer_indication_id">
<option value="1">Linus</option>
<option value="2">Bruno</option>
</select>
<%= f.collection_select(:indication_id,
Developer.all, :id, :name) %>

15. Customize fields

16. Select
<%= f.select(
:gender,
{ M: 1, F: 2 },
{ include_blank: 'Choice' },
{
class: 'css-class',
data: { id: 'gender', optional: true }
}
) %>
<select class="css-class" data-id="gender" data-
optional="true" name="developer[gender]" id="
developer_gender">

17. Nested forms
http://guides.rubyonrails.org/form_helpers.html#nested-forms

18. Configure model and controller
# controller
class DevelopersController < ApplicationController
def new
@developer = Developer.new
@developer.addresses.build
end
def developer_params
params.require(:developer).permit(:name, :resume, :
gender,
addresses_attributes: [:id, :name, :street])
end
end
# models
class Address < ActiveRecord::Base
belongs_to :developer
end
class Developer < ActiveRecord::Base
has_many :addresses
accepts_nested_attributes_for :addresses
end

19. Add nested form to view…
<%= form_for @developer do |f| %>
...
<%= f.fields_for :addresses do |addresses_form| %>
<%= addresses_form.text_field :name %>
<%= addresses_form.text_field :street %>
<% end %>
...
<% end %>

20. … renders
<input type="text" value="" name="developer[addresses_attributes][0][name]" id="
developer_addresses_attributes_0_name" />
<input type="text" value="" name="developer[addresses_attributes][0][street]" id="
developer_addresses_attributes_0_street" />
<input type="hidden" value="1" name="developer[addresses_attributes][0][id]" id="
developer_addresses_attributes_0_id" />

21. That's all folks
Bruno Almeida
https://github.com/wwwbruno
https://facebook.com/wwwbruno
https://twitter.com/@wwwbruno
http://www.slideshare.net/wwwbruno
Any questions?