angularjs – 以角度验证嵌套表单

发布时间：2020-12-17 17:57:44 所属栏目：安全来源：网络整理

导读：具有这个普通(名称属性由服务器请求)形式与角度,并不能弄清楚如何使验证工作.我应该把什么投入到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

具有这个普通(名称属性由服务器请求)形式与角度,并不能弄清楚如何使验证工作.我应该把什么投入到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：这只是一种形式,更复杂

谢谢

解决方法

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>

工作小提琴here

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

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

隐藏的输入将是服务器读取的输入,而另一个将用于进行客户端验证(稍后由服务器丢弃).这是一种黑客,但应该工作.

PS：确保您的表单在实际提交之前有效.可以用ng-submit完成

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!