Simple Form

Simple Form là một gem linh hoạt trong việc hộ trợ tạo form. Mục tiêu cơ bản của Simple Form là giúp bạn tìm thấy những thiết kế đơn giản và hữu ích nhất cho form.

Cài đặt

Thêm gem vào Gemfile:

gem 'simple_form'

Chạy câu lệnh install gem trong command:

bundle install

Chạy generator:

rails generate simple_form:install

Cách dùng

Simple Form có thể được tùy chỉnh nếu như bạn cần. Về cơ bản nó là tổng hợp các thành phần được gọi ra để tạo ra một đầu vào html hoàn chỉnh cho bạn, mà theo mặc định sẽ gồm label, hints, errors và các inputs. Nó không tạo ra các logic khác so với mặc định của Rails form helpers, mà là một sự kết hợp tuyệt vời.

Để bắt đầu sử dụng Simple Form bạn chỉ cần sử dụng các helper nó cung cấp:

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

Như simple_form trên sẽ tạo ra toàn bộ label cho username và password, và render các lỗi mặc định khi bạn nhập các dữ liệu không hợp lệ (sau khi submit form).

Nếu không thích các label mặc định bạn có thể ghi đè lên chúng trong input. Bạn cũng có thể thêm hint, error, hoặc placeholder. Đối với boolean input, bạn có thể thêm inline label như sau:

<%= simple_form_for @user do |f| %>
  <%= f.input :username, label: 'Your username please', error: 'Username is mandatory, please specify one' %>
  <%= f.input :password, hint: 'No special characters.' %>
  <%= f.input :email, placeholder: 'user@domain.com' %>
  <%= f.input :remember_me, inline_label: 'Yes, remember me' %>
  <%= f.button :submit %>
<% end %>

Trong trường hợp bạn muốn disable labels, hints hoặc error, hoặc muốn cấu hình html:

<%= simple_form_for @user do |f| %>
  <%= f.input :username, label_html: { class: 'my_class' } %>
  <%= f.input :password, hint: false, error_html: { id: 'password_error'} %>
  <%= f.input :password_confirmation, label: false %>
  <%= f.button :submit %>
<% end %>

Bạn có thể thêm bất kì thuộc tính nào của html vào trong input bằng cách dùng :input_html option:

<%= simple_form_for @user do |f| %>
  <%= f.input :username, input_html: { class: 'special' } %>
  <%= f.input :password, input_html: { maxlength: 20 } %>
  <%= f.input :remember_me, input_html: { value: '1' } %>
  <%= f.button :submit %>
<% end %>

Nếu bạn muốn thêm một option cho tất cả các input (ví dụ, một default_class), bạn có thể dùng :defaults trong simple_form_for . Tùy chọn cụ thể ở input gọi sẽ ghi đè lên giá trị mặc định:

<%= simple_form_for @user, defaults: { input_html: { class: 'default_class' } } do |f| %>
  <%= f.input :username, input_html: { class: 'special' } %>
  <%= f.input :password, input_html: { maxlength: 20 } %>
  <%= f.input :remember_me, input_html: { value: '1' } %>
  <%= f.button :submit %>
<% end %>

Simple Form tạo ra một wrapper div bao xung quanh label và input theo mặc định, bạn có thể thêm bất kỳ thuộc tính html bằng cách dùng :wrapper_html như là:

<%= simple_form_for @user do |f| %>
  <%= f.input :username, wrapper_html: { class: 'username' } %>
  <%= f.input :password, wrapper_html: { id: 'password' } %>
  <%= f.input :remember_me, wrapper_html: { class: 'options' } %>
  <%= f.button :submit %>
<% end %>

Các trường bắt buộc được đánh dấu * thêm vào phía trước label. Và tất nhiên, required của bất kỳ input nào cũng có thể được ghi đè khi cần thiết:

<%= simple_form_for @user do |f| %>
  <%= f.input :name, required: false %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

Mặc định, Simple Form sẽ kiểm tra column type trong database và đưa ra input type thích hợp để dùng trong form. Ví dụ, một cột được tạo type là :text trong database, input mặc định được dùng textarea. See the section Available input types and defaults for each column type for a complete list of defaults.

Simple Form cũng cho phép bạn ghi đè lên các type mặc định của input:

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.input :description, as: :text %>
  <%= f.input :accepts, as: :radio_buttons %>
  <%= f.button :submit %>
<% end %>

Để thay thế một checkbox cho thuộc tính accept, bạn có thể dùng radio button với và dùng text để thay thế cho textarea cho thuộc tính description. Bạn cũng có thể làm cho các thuộc tính boolean sử dụng as: :select, hiển thị dropdown.

Option :disabled cũng có thể sử dụng trong simple form, và nó sẽ tự động disabled các wrapper với một class CSS, vì vậy bạn có thể tạo thay đổi style label, hint,... như sau:

<%= simple_form_for @user do |f| %>
  <%= f.input :username, disabled: true, hint: 'You cannot change your username.' %>
  <%= f.button :submit %>
<% end %>

Simple Form chấp nhận những options của helper trong Rails:

<%= simple_form_for @user do |f| %>
  <%= f.input :date_of_birth, as: :date, start_year: Date.today.year - 90, end_year: Date.today.year - 12, discard_day: true, order: [:month, :year] %>
  <%= f.input :accepts, as: :boolean, checked_value: true, unchecked_value: false %>
  <%= f.button :submit %>
<% end %>

Simple Form cũng cho phép bạn dùng label, hint, input_field, error and full_error helpers:

<%= simple_form_for @user do |f| %>
  <%= f.label :username %>
  <%= f.input_field :username %>
  <%= f.hint 'No special characters, please!' %>
  <%= f.error :username, id: 'user_name_error' %>
  <%= f.full_error :token %>
  <%= f.submit 'Save' %>
<% end %>

Bất kì method thêm nào cũng sẽ được render như html option.

Tài liệu dịch: https://github.com/plataformatec/simple_form