你好我在ng-repeat中的表行内有一个表单,在那个表单里面我有一个数字字段和一个按钮(自定义指令名为“action”)现在当点击该按钮时我希望表单进行验证在提交之前,但是当我尝试没有任何反应时,我没有错误。
<table class="table schedules">
<thead>
<tr>
<th style="text-align:center;" > Ticket Type</th>
<th style="text-align:center;" > Ticket Price (GHS)</th>
<th style="text-align:center;" > How many?</th>
<th></th>
</tr>
</thead>
<tbody>
@if (count($ticketTypes) <= 0))
<tr ng-hide="d.ticketTypes.length > 0">
<td style="text-align:center;" colspan="5">
<h4 style="">There are no tickets available.</h4>
</td>
</tr>
@endif
<tr ng-repeat="type in d.ticketTypes">
<form name="ticketForm" ng-submit="ticketForm.$valid && addToCart('event', d, type.id, $index)" novalidate>
<td style="text-align:center;" ><b><% type.fee_cat_desc %></b></td>
<td style="text-align:center;" ><b><% type.event_fee | currency : '₵' %></b></td>
<td style="text-align:center;" ><b><input type="number" ng-model="line.d.ticket_no" class="form-control" min="1" max="30" style="width:80px !important;" ng-required/></b></td>
<td>
<action text='Buy Ticket' state='<% state %>' index='<% $index %>' selected='<% selectedIndex %>'></action>
</td>
</form>
</tr>
</tbody>
</table>
这是我的行动指示:
HTML:
<button type="submit" ng-class="{ 'btn-set': isReady === true || isWorking === true || isComplete === true || hasFailed === true, 'btn-ready-state': isReady === true || selected != index, 'btn-working-state': isWorking === true && selected == index, 'btn-failed-state': hasFailed === true }" ng-cloak>
<i ng-if="isReady === true || selected != index" class="fa fa-shopping-cart"></i>
<img ng-src="/images/loading - small.png" class="img" ng-show="isWorking && selected == index "></span>
<i ng-if="isComplete && selected == index " class="fa fa-check"></i>
<span class="text">
<span ng-if="isReady === true || selected != index"><% text %></span>
</span>
</button>
答案 0 :(得分:0)
您错过name=""
属性表单上的一件事,需要通过角度
<input type="number" name="ticket_no-{{$index}}" ng-model="line.d.ticket_no"
class="form-control" min="1" max="30" style="width:80px !important;" ng-required/>
请参阅此SO Answer以获取更多说明
答案 1 :(得分:0)
你有多个同名的<form>
个。这是角度问题,因为它通过名称引用每个表单。快速解决方法是使用$index
或type
使名称不同。
<tr ng-repeat="type in d.ticketTypes">
<form name="ticketForm_{{type}}" ng-submit="ticketForm.$valid && addToCart('event', d, type.id, $index)" novalidate>
<td style="text-align:center;" ><b><% type.fee_cat_desc %></b></td>
<td style="text-align:center;" ><b><% type.event_fee | currency : '₵' %></b></td>
<td style="text-align:center;" ><b><input type="number" ng-model="line.d.ticket_no" class="form-control" min="1" max="30" style="width:80px !important;" ng-required/></b></td>
<td>
<action text='Buy Ticket' state='<% state %>' index='<% $index %>' selected='<% selectedIndex %>'></action>
</td>
</form>
</tr>
答案 2 :(得分:0)
确保您的输入字段包含type="button"
和name="submit"