Angular 表单未在 Ng-repeat 中提交答案

【问题标题】：Angular Form Not Submitting in Ng-repeatAngular 表单未在 Ng-repeat 中提交
【发布时间】：2015-04-09 16:51:54
【问题描述】：

您好，我在 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>

【问题讨论】：

标签： angularjs forms angularjs-directive

【解决方案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

【讨论】：

【解决方案2】：

您有多个同名的<form>s。这是 Angular 的一个问题，因为它通过名称引用每个表单。一个快速的解决方法是使用$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>

【讨论】：

这也不起作用，请帮帮我，我要做的就是在我的表单中单击按钮时验证并提交每个文本框。
我认为按钮提交不起作用，是因为它在指令中吗？
取出novalidate，也删除此逻辑并将其放入您的addToCart()函数中：ticketForm.$valid &&
您还需要在每个输入上使用name。
你能做一个plunker吗？这将使调试更容易。

【解决方案3】：

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

【讨论】：

我的表单中已经有一个提交按钮，如我的代码的 html 部分所示。
是的，我明白了，但是按钮的名称属性需要是“提交”。像这样：<button type="submit" name="submit"></button>.