Form_with helper in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output HTML of this form_with helper?

Given the following Rails code, what is the rendered HTML form's action attribute value?

Ruby on Rails

form_with model: @article, local: true do |form|
  form.text_field :title
end

A "/articles/new"

B "/articles/:id"

C "/articles/edit"

D "/articles"

💡 Hint

Think about what URL Rails uses for a new record when using form_with with a model.

When @article is a new record, form_with generates a form with action="/articles" for creating a new article.

❓ state_output

intermediate

What is the value of the method attribute in this form?

Consider this Rails code snippet. What HTTP method will the form use when submitted?

Ruby on Rails

form_with model: @user, url: user_path(@user), local: true do |form|
  form.password_field :password
end

A "patch"

B "put"

C "get"

D "post"

💡 Hint

Check if the model is a persisted record and what Rails uses for updates.

If @user is persisted, form_with uses patch as the HTTP method for updates.

📝 Syntax

advanced

Which option correctly uses form_with to submit data asynchronously?

Select the code snippet that creates a form submitting data via AJAX using form_with.

A

form_with model: @post, remote: true do |form|
  form.text_field :content
end

B

form_with model: @post, local: false do |form|
  form.text_field :content
end

C

form_with model: @post, ajax: true do |form|
  form.text_field :content
end

D

form_with model: @post, async: true do |form|
  form.text_field :content
end

💡 Hint

Rails uses a specific option to enable AJAX submission in form_with.

The remote: true option tells Rails to submit the form via AJAX.

🔧 Debug

advanced

Why does this form_with not generate the expected input name attribute?

Given this code, the generated input's name attribute is just "title" instead of "article[title]". What is the cause?

Ruby on Rails

form_with do |form|
  form.text_field :title
end

A The <code>scope</code> option is deprecated and ignored in Rails 7+.

B Missing <code>model:</code> option causes <code>form_with</code> to treat it as a generic form without model binding.

C The <code>text_field</code> method requires a full attribute name like <code>article_title</code>.

D The <code>form_with</code> helper requires <code>local: true</code> to generate correct names.

💡 Hint

Think about how form_with generates input names when no model is given.

Without a model: option, form_with treats the form as non-model-bound, generating input names without namespacing.

🧠 Conceptual

expert

What is the main difference between form_with and form_for in Rails 7?

Choose the statement that best explains the key conceptual difference between form_with and form_for.

A <code>form_with</code> always generates forms that submit via AJAX by default, while <code>form_for</code> does not.

B <code>form_for</code> supports model binding, but <code>form_with</code> only supports generic forms without models.

C <code>form_with</code> replaces <code>form_for</code> and <code>form_tag</code>, unifying form helpers with a consistent API and defaults.

D <code>form_with</code> requires explicit URL options, whereas <code>form_for</code> infers URLs automatically.

💡 Hint

Think about Rails 7's approach to form helpers and their evolution.

Rails 7 introduced form_with to unify the previous helpers form_for and form_tag into one consistent API that supports both model-bound and generic forms.

Practice

1. What is the main purpose of the form_with helper in Rails?

easy

A. To create HTML forms linked to models with automatic URL and method handling

B. To style forms using CSS classes automatically

C. To validate form inputs on the client side

D. To generate JavaScript code for form animations

Solution

1. Step 1: Understand the role of form_with

   The form_with helper builds forms in Rails and connects them to models.

2. Step 2: Identify what it automates

   It automatically sets the form's URL and HTTP method based on the model's state.

3. Final Answer:

   To create HTML forms linked to models with automatic URL and method handling -> Option A

4. Quick Check:

   form_with purpose = create linked forms [OK]

Hint: Remember: form_with links forms to models automatically [OK]

Common Mistakes:

• Thinking form_with styles forms
• Confusing form_with with client-side validation
• Assuming form_with generates JavaScript animations

2. Which of the following is the correct syntax to create a form using form_with for a model instance @post with normal (non-AJAX) submission?

easy

A. form_with @post, remote: true do |form|

B. form_with model: @post, local: true do |form|

C. form_with model: @post, remote: true do |form|

D. form_with url: posts_path, method: :get do |form|

Solution

1. Step 1: Identify how to disable AJAX

   Using local: true disables AJAX and makes the form submit normally.

2. Step 2: Check the correct syntax for model binding

   The correct syntax is form_with model: @post, local: true do |form|.

3. Final Answer:

   form_with model: @post, local: true do |form| -> Option B

4. Quick Check:

   local: true disables AJAX [OK]

Hint: Use local: true for normal form submission [OK]

Common Mistakes:

• Omitting local: true for non-AJAX forms
• Using remote: true which enables AJAX
• Using method :get for form submission instead of post

3. Given the following code snippet, what will be the HTTP method used when submitting the form?

form_with model: @article do |form|
  # form fields here
end

medium

A. DELETE if @article is persisted, POST if new

B. GET always

C. POST if @article is a new record, PATCH if it is persisted

D. PUT always

Solution

1. Step 1: Understand form_with method behavior

   When linked to a model, form_with uses POST for new records and PATCH for existing records.

2. Step 2: Apply to @article

   If @article is new, method is POST; if persisted, method is PATCH.

3. Final Answer:

   POST if @article is a new record, PATCH if it is persisted -> Option C

4. Quick Check:

   form_with method depends on record state [OK]

Hint: New record = POST, existing record = PATCH [OK]

Common Mistakes:

• Assuming GET is used for form submission
• Confusing PUT with PATCH
• Thinking DELETE is used automatically

4. Identify the error in this form_with usage:

form_with model: @user, local: true do
  text_field :name
end

medium

A. Missing block variable for form builder

B. local: true is invalid option

C. text_field should be text_field_tag

D. model: @user should be url: user_path(@user)

Solution

1. Step 1: Check block syntax

   The block must accept a form builder variable, e.g., do |form|.

2. Step 2: Check usage of form builder methods

   Inside the block, form builder methods like form.text_field :name must be called.

3. Final Answer:

   Missing block variable for form builder -> Option A

4. Quick Check:

   Block needs form variable for fields [OK]

Hint: Always use |form| block variable with form_with [OK]

Common Mistakes:

• Omitting the block variable
• Calling form builder methods without prefix
• Confusing text_field with text_field_tag

5. You want to create a form for a new @comment that submits normally (no AJAX), includes a text area for content, and a submit button labeled 'Post Comment'. Which of the following is the correct complete form_with usage?

hard

A. form_with @comment do |form|
form.text_field :content
form.submit
end

B. form_with model: @comment, remote: true do |form|
form.text_area :content
form.submit 'Post Comment'
end

C. form_with url: comments_path, method: :post do |form|
form.text_area :content
form.submit 'Post Comment'
end

D. form_with model: @comment, local: true do |form|
form.text_area :content
form.submit 'Post Comment'
end

Solution

1. Step 1: Ensure normal submission

   Use local: true to disable AJAX and submit normally.

2. Step 2: Use correct form builder methods

   Use form.text_area :content for the text area and form.submit 'Post Comment' for the button label.

3. Final Answer:

   form_with model: @comment, local: true do |form| form.text_area :content form.submit 'Post Comment' end -> Option D

4. Quick Check:

   local: true + text_area + submit label [OK]

Hint: Use local: true and form builder methods for fields [OK]

Common Mistakes:

• Using remote: true which enables AJAX
• Using text_field instead of text_area for content
• Omitting the submit button label