Rails 窗体中的 Angular 客户端窗体验证
angular client side form validation in rails form
我正在尝试使用角度对设计注册表单进行客户端验证。但我无法让它工作。我成功地按预期将"无效"类添加到字段中。但是当我做 ng-show 它现在显示任何东西,无论类如何。除此之外,没有角度控制器或文件。我所做的只是客户端验证。我现在添加的所有内容都是first_name
字段中ng-required
。有人可以告诉我这里做错了什么吗?
这是我的代码。
<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>
像这样更改输入的 ng 模型:
<%= 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
.
相关文章:
- 客户端服务器REST API captcha实现
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 如何使用Socket.io将命令从客户端发送到服务器
- 如何轻松地将服务器端变量从Java代码转移到客户端代码
- Meteor方法在客户端返回null,在客户端运行的相同方法返回正确的值
- 从客户端获取修改后的对象,并将其与服务器上的原始对象组合
- 如何将我的javascript库公开给其他客户端使用
- 是否可以使用JavaScript/AAJAX在客户端创建一个文件
- 如何使用Javascript客户端对象模型检索Sharepoint 2010列表项权限
- 返回/从Twit's客户端.get
- 将客户端特定的日期格式返回到服务器MVC4
- MobileFirst:在客户端运行计时器作业-最佳选项
- 标签客户端的设置值
- 我的客户端选项是什么
- ASP Web 窗体从视图状态中删除类客户端
- 用C#将在线flash客户端加载到windows窗体中
- 在 ASP.NET Web 窗体中从 javascript/客户端设置属性背后的代码
- Rails 窗体中的 Angular 客户端窗体验证
- ASP.NET Web窗体-通过jquery填充字段时客户端验证不起作用
- 从Web窗体在客户端计算机上启动MS Word应用程序.(所有浏览器)