验证嵌套形式的角度

一尘不染

验证嵌套形式的角度

angularjs

具有角形的这种普通（名称属性由服务器要求）形式，无法弄清楚如何使验证有效。我应该在ng-show =“ TODO”中添加什么

<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：这只是一种形式，更复杂

谢谢

阅读 242

2020-07-04

共1个答案

一尘不染

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

隐藏的输入将是服务器读取的输入，而另一输入将用于执行客户端验证（此后被服务器丢弃）。这是一种破解，但应该可以。

PS：在实际提交表单之前，请确保您的表单有效。可以通过ng-
submit完成

2020-07-04