4

拥有这个带有角度的普通(服务器要求名称属性)表单并且无法弄清楚如何使验证工作。我应该在 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:这只是一张表格,比较复杂

谢谢

4

1 回答 1

11

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

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

长话短说,您应该依靠ng-form来验证动态创建的输入。就像是 :

<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>

在这里工作小提琴

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

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

隐藏的输入将是服务器读取的输入,而另一个将用于进行客户端验证(后来被服务器丢弃)。这是一种 hack,但应该可以。

PS:在实际提交之前,请确保您的表格有效。可以用ng-submit完成

于 2013-11-08T13:32:58.237 回答