ruby-on-rails - 将 Rails 表单与 Angularjs 客户端表单验证一起使用时出现字段名称问题

Question

我正在尝试在 Rails 项目中使用 Angularjs 进行客户端表单验证。我使用内置 ng-show 指令来显示表单字段的错误。代码很简单:

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), 
                              html: { novalidate: true, name: 'signUpForm'}) do |f| %>
  ...

  <%= f.email_field :email, :'ng-model'=>'user.email', name: 'uEmail', 
                              autofocus: true, required: true %>
  ...

  <div ng-show="signUpForm.uEmail.$dirty && signUpForm.uEmail.$invalid">
    <span ng-show="signUpForm.uEmail.$error.required">
      <small class="error">Tell us your email.</small>
    </span>
    <span ng-show="signUpForm.uEmail.$error.email">
      <small class="error">This is not a valid email.</small>
    </span>
  </div>
<% end %>

这给了我一个很好的客户端验证，但问题是，因为 Rails 默认情况下给出一个表单字段名称，如 model[attr]就我而言user[email]

但是，在这里我给我的电子邮件字段命名 uEmail提交表单后的 post 请求中的参数将为 uEmail: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="512929291129297f2929" rel="noreferrer noopener nofollow">[email protected]</a>'哪个 Rails 无法理解(默认情况下 Rails 期望类似 user: { email: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dea6a6a69ea6a6f0a6a6" rel="noreferrer noopener nofollow">[email protected]</a>' ... } )

我尝试删除 name: 'uEmail'并回退到 Rails 默认 user[email]并在ng-show中使用类似的东西指令

<span ng-show="signUpForm.user[email].$error.required">

但这行不通，有人知道如何解决这个问题吗？

btw: rails -v 4.0 Angularjs version: 1.0.7

Answer 1

我不知道你是否找到了这个问题的解决方案，我也面临着同样的问题，我发现一个问题已经在 GitHub 上打开了:

https://github.com/angular/angular.js/issues/1201

解决方案非常简单，根据您的情况，您只需执行以下操作:

<span ng-show="signUpForm['user[email]'].$error.required">