rails表单中的角度客户端表单验证答案

【问题标题】：angular client side form validation in rails formrails表单中的角度客户端表单验证
【发布时间】：2016-01-17 22:04:07
【问题描述】：

我正在尝试使用 Angular 对设计注册表单进行客户端验证。但我无法让它发挥作用。我成功地将“无效”类按预期添加到字段中。但是，当我执行 ng-show 时，它现在显示任何内容，而与课程无关。除此之外没有角度控制器或文件。我所做的只是客户端验证。我现在添加的只是ng-required 在first_name 字段中。有人可以告诉我这里做错了什么吗？

这是我的代码。

<div class="contaner-fluid" ng-app>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {name: "myform", "novalidate" => true}) do |f| %>
    <%= devise_error_messages! %>
    <div class="col-md-8  col-md-offset-2">
      <div class="panel panel-default">
        <div class="panel-heading"><h2>Sign up</h2></div>
        <div class="panel-body">

          <div class="col-md-12">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <%= f.label :first_name %><br />
                  <%= f.text_field :first_name, autofocus: true, "ng-model" => "myform.firstname", "ng-required": true, class: "form-control input-lg" %>
                </div>
                <p ng-show="myform.firstname.$invalid">
                  You must fill a valid name
                </p>
              </div>

              <div class="col-md-6">
                <div class="form-group">
                  <%= f.label :last_name %><br />
                  <%= f.text_field :last_name, autofocus: true, class: "form-control input-lg"%>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group">
            <%= f.label :email %><br />
            <%= f.email_field :email, autofocus: true, class: "form-control input-lg" %>
          </div>

          <div class="form-group">
            <%= f.label :password %>
            <%= f.password_field :password, autocomplete: "off" , class: "form-control input-lg" %>
          </div>

          <div class="form-group">
            <%= f.label :password_confirmation %><br />
            <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control input-lg"  %>
          </div>

          <div class="actions">
            <%= f.submit "Sign up", class: "btn btn-success btn-block" %>
          </div>
<% end %>

</div>
</div>
</div>
<%= render "devise/shared/links" %>

</div>

这是我的凉亭文件

"dependencies": {
    "normalize-css": "normalize.css#~3.0.3",
    "bootstrap-sass": "~3.3.6",
    "angular": "~1.4.8",
    "bootstrap": "~3.3.6"
  }

更新

我可以进行数据绑定..所以角度在表单中工作正常。如果我尝试这个，它将起作用{{myform.firstname}}。但是如果我这样做{{myform.firstname.$valid}}..我可以看到类已添加到输入字段但无法像这样访问它，它不会显示任何内容。我没有创建controller 或module，因为这是一个非常基本的实现。谢谢你的帮助。

这是为表单生成的完整 html

<div class="contaner-fluid ng-scope" ng-app="">

<form name="myform" novalidate="novalidate" class="new_user ng-dirty ng-valid-parse ng-invalid ng-invalid-required" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="omiBCucx+U4r9P+T0d4rQEeKhni3H4YlSPSU9FIiP4yFnMe+orTnE64czY5NSk4Yd/8ObjPFz8mlURYgOfxXhw==">

    <div class="col-md-8  col-md-offset-2">
      <div class="panel panel-default">
        <div class="panel-heading"><h2>Sign up</h2></div>
        <div class="panel-body">

          <div class="col-md-12">
            <div class="row">
              <div class="col-md-6 ng-binding">
                <div class="form-group">
                  <label for="user_first_name">First name</label><br>
                  <input autofocus="autofocus" ng-model="myform.first_name" ng-required="true" class="form-control input-lg ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" type="text" name="user[first_name]" id="user_first_name" required="required">
                </div>

                <p ng-show="myform.first_name.$invalid" class="ng-hide">
                  You must fill a valid name
                </p>
              </div>

              <div class="col-md-6">
                <div class="form-group">
                  <label for="user_last_name">Last name</label><br>
                  <input autofocus="autofocus" class="form-control input-lg" type="text" name="user[last_name]" id="user_last_name">
                </div>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="user_email">Email</label><br>
            <input autofocus="autofocus" class="form-control input-lg" type="email" value="" name="user[email]" id="user_email">
          </div>

          <div class="form-group">
            <label for="user_password">Password</label>
            <input autocomplete="off" class="form-control input-lg" type="password" name="user[password]" id="user_password">
          </div>

          <div class="form-group">
            <label for="user_password_confirmation">Password confirmation</label><br>
            <input autocomplete="off" class="form-control input-lg" type="password" name="user[password_confirmation]" id="user_password_confirmation">
          </div>

          <div class="actions">
            <input type="submit" name="commit" value="Sign up" class="btn btn-success btn-block">
          </div>

</div>
</div>
</div></form>
  <a href="/users/sign_in">Log in</a><br>







</div>

【问题讨论】：

您实际上应该在表单标签中添加name 属性。我不确定 Rails 是否为表单标签添加名称，但您应该将表单标签设置为
'html: {name: "myform", "novalidate" => true}'
您还需要name 才能使输入正确。 .
现在验证了..但这似乎不是问题
@ArashM 用生成的 html 更新了问题。

标签： javascript ruby-on-rails angularjs validation

【解决方案1】：

像这样改变输入的 ng-model：

<%= f.text_field :first_name, autofocus: true, "ng-model" =>  "firstname", "ng-required": true, class: "form-control input-lg" %>

然后更改您的ng-show：

<p ng-show="myform['user[first_name]'].$invalid">

它应该可以工作。

附：您不需要使用ng-required，因为您没有评估该领域的要求。您可以只使用 html required。

【讨论】：