Question

我有一个前端rails应用程序正在请求rails API。当我的用户想要创建一个帐户时，他正在前端应用程序上提交帐户表单：

<h1>Create Account</h1>
<form action="http://localhost:3000/accounts" method="post">
  <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
  <div class="form-group">
    <%= label_tag 'account[name]', "name" %>
    <input type="text" name="account[name]" required>
  </div>
  <div class="form-group">
    <%= label_tag "account[contact_mail]", "E-Mail" %>
    <input type="text" name= "account[contact_mail]" required>
  </div>
  <div class="form-group">
    <%= label_tag "account[contact_tel]", "Telephone" %>
    <input type="text" name= "account[contact_tel]" required>
  </div>
  <div class="form-group">
    <%= label_tag "account[iban]", "Iban" %>
    <input type="text" name= "account[iban]">
  </div>
  <div class="form-group">
    <%= label_tag "account[bic]", "Bic" %>
    <input type="text" name= "account[bic]">
  </div>
  <input type="submit">
    <% if @errors %>
    <ul class="list-unstyled">
      <%@errors.each do |error|%>
        <li class="has-error"><%=error%></li>
      <% end -%>
    </ul>
  <% end -%>
</form>

在提交时，前端应用create中的方法account controller被调用。然后，前端应用程序中的create方法调用rails API上的create方法，该方法负责更新数据库并将JSON呈现给前端应用程序。

来自前端应用的

1）AccountController#create：

def create

  # Post sur API create Account
 @response =   HTTParty.post(ENV['API_ADDRESS']+'api/v1/accounts',
  :body => { :name => params[:account][:name],
             :contact_mail => params[:account][:contact_mail],
             :contact_tel =>  params[:account][:contact_tel],
             :legal_status => params[:account][:legal_status],
             :iban => params[:account][:iban],
             :bic => params[:account][:bic]
           }.to_json,
  :headers => { 'X-User-Email' => session[:user_email], 'X-User-Token'=> session[:user_token], 'Content-Type' => 'application/json' } )
  # Erreur Mauvais Auth Token
  if @response["error"] == "You need to sign in or sign up before continuing."
    redirect_to unauthorized_path
  # erreur de validation
  elsif @response["errors"]
    @errors = @response["errors"]
    flash[:alert] = "heello"
    render :new
  else
    account_id = @response["account"]["id"]
    redirect_to account_path(account_id)
  end
end

来自API的

2）AccountController#create：

def创建 @account = Account.new（account_params.merge（admin：current_user））授权@account if @ account.save 渲染：显示其他 render_error 结束端

render error是一种以JSON格式呈现错误的方法：

  def render_error
    render json: { errors: @account.errors.full_messages }, status: :unprocessable_entity
  end

如果在将API提交给API时存在验证错误，我会将其显示在表单旁边的前端应用上：

 <% if @errors %>
        <ul class="list-unstyled">
          <%@errors.each do |error|%>
            <li class="has-error"><%=error%></li>
          <% end -%>
        </ul>

我的问题是，我还希望使用用户已提交的数据预填充表单，以获得更好的用户体验。

我知道有关于如何在验证错误的情况下使用rails预填充表单的帖子但我觉得他们没有真正解决我的问题这个“双应用程序模式”和我的前端应用程序没有任何模型（所有模型/数据库交互都在API中处理

在收到JSON API错误后，如何使用用户输入预填充表单？

Answer 1

在您拥有的表单中，您可以将值属性添加到使用irb实例变量填充的输入字段中 <input type="text" name="account[name]" value="<%= @account_name %>" required>

然后在AccountController#create中，根据您希望显示无效数据时收到的参数设置实例变量。

```

elsif @response["errors"]
  @errors = @response["errors"]

  #new code
  @account_name = params[:account][:name]
  #set each variable, extra to method or class for cleaner style

  flash[:alert] = "heello"
  render :new

```

当表单最初呈现时，这些变量将是uninitialize / nil，因此表单框中没有值，然后您可以在验证失败时在控制器中显式设置它们，但是您希望在表单中维护数据。

这绝对是一种完全维护表单状态的过度手动方式，我建议如果您想在应用程序中重用该模式，请查看使用form_for。这篇文章可能会让您深入了解使用纯红宝石对象而不是模型对象。 Is it possible to create form for simple class

在API发送JSON错误后，使用数据预填充表单

1 个答案: