Я работаю над приложением, в котором, если пользователь нажимает кнопку «Добавить новый», форма будет отображаться в модальной форме и сможет заполнять, отображать ошибки и вставлять / сохранять данные в базе данных так же, как форма регулярных рельсов.
Вот моя форма @ views/contacts/_form.html:
<%= form_for(@contact, html: {multipart: true}) do |f| %>
<div class="card">
<div class="card-header">
<h2 class="display-5 main-text-blue text-center font-weight-bold"><%= @contact.new_record? ? 'Add New Contact' : 'Update Contact'%> </h2>
</div>
<div class="card-body">
<div class="errors">
<% if @contact.errors.any? %>
<div class="alert alert-danger">
<h5 class="text-center mb-n1 pb-1"><i class="fa fa-exclamation-triangle text-danger"></i> Please correct the following errors: </h5>
</div>
<% end %>
</div>
<div class="form-group row">
<div class="col-md-5 mx-auto">
<div class="wrap" id="avatar-container">
<div class="valign-middle">
<div class="form-group">
<%= image_tag @contact.contact_avatar.attached? ? @contact.contact_avatar : "100x100.png", class: "img-responsve img-preview" %>
<label for="file" class="sr-only">Choose Image</label>
<%= f.file_field :contact_avatar, id: "file" %>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<%= f.label :name, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_field :name, class: "form-control #{'is-invalid' if has_error?(@contact, :name) }", id: "name", placeholder: "Name.." %>
<% if has_error?(@contact, :name) %>
<span class="text-danger">
<%= get_error(@contact, :name)%>
</span>
<% end %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_field :email, class: "form-control #{'is-invalid' if has_error?(@contact, :email) }", id: "email", placeholder: "Email.." %>
<% if has_error?(@contact, :email) %>
<span class="text-danger">
<%= get_error(@contact, :email)%>
</span>
<% end %>
</div>
</div>
<div class="form-group row">
<%= f.label :mobile, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_field :mobile, class: "form-control #{'is-invalid' if has_error?(@contact, :mobile) }", id: "mobile", placeholder: "Mobile.." %>
<% if has_error?(@contact, :mobile) %>
<span class="text-danger">
<%= get_error(@contact, :mobile)%>
</span>
<% end %>
</div>
</div>
<div class="form-group row">
<%= f.label :phone, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_field :phone, class: "form-control #{'is-invalid' if has_error?(@contact, :phone) }", id: "phone", placeholder: "Phone.." %>
<% if has_error?(@contact, :phone) %>
<span class="text-danger">
<%= get_error(@contact, :phone)%>
</span>
<% end %>
</div>
</div>
<div class="form-group row">
<%= f.label :country, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_field :country, class: "form-control", id: "country", placeholder: "Country.." %>
</div>
</div>
<div class="form-group row">
<%= f.label :address, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_field :address, class: "form-control", id: "address", placeholder: "Address.." %>
</div>
</div>
<div class="form-row">
<%= f.label :location, class: "col-lg-2 col-form-label" %>
<div class="col-4">
<%= f.text_field :city, class: "form-control", id: "city", placeholder: "City.." %>
</div>
<div class="col-4">
<%= f.text_field :state, class: "form-control", id: "state", placeholder: "State.." %>
</div>
<div class="col-2">
<%= f.text_field :zip, class: "form-control", id: "zip", placeholder: "Zip.." %>
</div>
</div>
<div class="form-group row category-mt">
<%= f.label :category, class: "col-lg-2 col-form-label" %>
<div class="col-lg-5">
<%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Select Category" }, id: "category_select", class: "form-control #{'is-invalid' if has_error?(@contact, :category) }" %>
<% if has_error?(@contact, :category) %>
<span class="text-danger">
<%= get_error(@contact, :category)%>
</span>
<% end %>
</div>
<div class="col-lg-3">
<a class="btn btn-outline-secondary add-category-button btn-block mt-1" href="#" id="add-category-btn">Add Category</a>
</div>
</div>
<div class="form-group row" id="add-new-category">
<label class="col-lg-2 col-form-label" for="location">New Category:</label>
<div class="col-lg-10">
<div class="input-group">
<input id="new-category" name="new-category" class="form-control" placeholder="Enter category name" type="text">
<div class="input-group-append">
<button class="btn btn-outline-secondary category-btn" id="save-new-category-btn" type="button"><i class="fa fa-check"></i></button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<%= f.label :note, class: "col-lg-2 col-form-label" %>
<div class="col-lg-10">
<%= f.text_area :note, class: "form-control", id: "note", placeholder: "Note..", rows: "3" %>
</div>
</div>
</div>
<div class="card-footer text-center mx-auto">
<%= f.submit @contact.new_record? ? "Save" : "Update", class: "btn btn-primary border-button mb-3 ml-3", id: "save-btn" %>
<%= link_to "Cancel", contacts_path, class: "btn btn-outline-secondary border-button mt-n3", id: "cancel-btn" %>
</div>
</div>
<% end %>
Затем у меня есть кнопка «Добавить новый», которую я установил на remote: true, чтобы показать новая форма в модальной форме:
<%= link_to new_contact_path, class: "btn btn-primary border-button float-right", ":data-target" => "#form-modal", ":data-toggle" => "modal", remote: true do %>
<span><i class="fa fa-plus white"></i> Add New</span>
<% end %>
А вот мой модальный код:
<!-- Modal -->
<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="form-modal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body" id="form-modal-body">
<%= render "form" %>
</div>
</div>
</div>
</div>
Я также создал new.js.erb файл внутри views/contacts с кодами ff:
$('#form-modal').modal('show');
Я даже пытался отрисовать форму, используя:
$('#form-modal-body').html('<%= escape_javascript render("form") %>')
Но это портит дизайн формы, поэтому я переключаюсь обратно на рендеринг формы внутри самого модала.
Теперь модал работает отлично и показал новую контактную форму. Однако, когда я попытался нажать кнопку save без ввода каких-либо данных, я ожидаю увидеть сообщения об ошибках / проверку в моей модальной форме, вместо этого она показывает ошибку внутри http://localhost:3000/dashboard/contacts/new, которая является обычной формой рельсов, а не показывает их. внутри модальности.
Не уверен, почему он так себя ведет. Мне нужно показать ошибку на модале и иметь возможность сохранять данные внутри нее, а не перенаправлять ее в обычную форму при нажатии кнопки save.
Пожалуйста, помогите!