以角度验证嵌套表单 [英] Validating nested form in angular

查看：22
本文介绍了以角度验证嵌套表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个普通的(服务器需要 name 属性)表单带有 angular 并且无法弄清楚如何进行验证.我应该将什么放入 ng-show="TODO"

http://jsfiddle.net/Xk3VB/7/

<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]"><div ng-repeat="变体中的变体" ng-form="variant_form"><div><label>持续时间:</label><input name="variants[{{$index}}][duration]" ng-model="variant.duration" required/><span ng-show="TODO">所需时间</span>
<div><标签>价格:</标签><input name="variants[{{$index}}][price]" ng-model="variant.price"/><span ng-show="TODO">所需价格</span>

</表单>

ps:这只是一个表格，比较复杂

谢谢

解决方案

AngularJS 依赖输入名称来暴露验证错误.

不幸的是，截至今天，(不使用自定义指令)动态生成输入的名称是不可能的.事实上，检查输入文档我们可以看到 name 属性只接受一个字符串.

长话短说，您应该依靠 ng-form 来动态验证创建的输入.类似的东西:

<div ng-repeat="变体中的变体" ><ng-form name="innerForm"><div><label>持续时间:</label><input name="duration" ng-model="variant.duration" required/><span ng-show="innerForm.duration.$error.required">所需的持续时间</span>

<div><标签>价格:</标签><input name="price" ng-model="variant.price" required/><span ng-show="innerForm.price.$error.required">需要的价格</span>

</ng-form>

工作小提琴这里

更新:根据您的服务器端要求，为什么不做这样的事情:

<input name="duration" ng-model="variant.duration" required/>

隐藏的输入将被服务器读取，而另一个将用于进行客户端验证(后来被服务器丢弃).这是一种黑客行为，但应该有效.

PS:在实际提交之前，请确保您的表单有效.可以使用 ng-submit

完成

Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"

http://jsfiddle.net/Xk3VB/7/

<div ng-app>
  <form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
    <div ng-repeat="variant in variants" ng-form="variant_form">
      <div>
        <label>Duration:</label>
        <input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
        <span ng-show="TODO">Duration required</span>
      </div>
      <div>
        <label>Price:</label>
        <input name="variants[{{$index}}][price]" ng-model="variant.price" />
        <span ng-show="TODO">Price required</span>
      </div>
    </div>
  </form>
</div>

ps: this is just piece of form, which is more complicated

Thanks

解决方案

AngularJS relies on input names to expose validation errors.

Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.

Long story short you should rely on ng-form to validate dynamically created inputs. Something like :

<div ng-repeat="variant in variants" >
  <ng-form name="innerForm">
     <div>
        <label>Duration:</label>
        <input name="duration" ng-model="variant.duration" required />
        <span ng-show="innerForm.duration.$error.required">Duration required</span>
    </div>
    <div>
        <label>Price:</label>
        <input name="price" ng-model="variant.price" required/>
        <span  ng-show="innerForm.price.$error.required">Price required</span>
    </div>
  </ng-form>

Working fiddle here

UPDATE : Base on your serverside requirement why not do something like that :

<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />

The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.

PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit

这篇关于以角度验证嵌套表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆