Question

你好我在ng-repeat中的表行内有一个表单，在那个表单里面我有一个数字字段和一个按钮（自定义指令名为“action”）现在当点击该按钮时我希望表单进行验证在提交之前，但是当我尝试没有任何反应时，我没有错误。

<table class="table schedules">
    <thead>
    <tr>
        <th style="text-align:center;" >&nbsp;Ticket Type</th>
        <th style="text-align:center;" >&nbsp;Ticket Price (GHS)</th>
        <th style="text-align:center;" >&nbsp;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>

Answer 1

您错过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以获取更多说明

Answer 2

你有多个同名的<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>

Answer 3

确保您的输入字段包含type="button"和name="submit"

Angular Form不以Ng-repeat提交

3 个答案: