AngularJS在表格内验证没有表单的输入

Question

我的问题可能看起来很奇怪,但我建立了一个角度SPA,允许用户使用输入直接将信息输入到表中.我这样做是因为数据永远不需要在任何地方提交,并且服务使用它来计算最后显示的一些值.我现在的问题是我想验证输入以确保它们不是空的.

我做了一些研究,我找到的所有教程都依赖于输入是表单的一部分,我试图避免,因为表中的布局看起来很好并且适合目的.

        <table class="text-center">
                <tr>
                    <th class="header">Course Type</th>
                    <th>Amount of Times</th>
                    <th>Frequency (PA)</th>
                    <th>% Staff who need it</th>
                </tr>
                <tr>
                    <td class="header"><label for="induction">Induction:</label></td>
                    <td><input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /></td>
                    <td><input class="form-control" type="number" id="inductionFrequency" ng-model="staff.inductionFrequency" /></td>   
                    <td><p>100</p></td>             
                </tr>
                <tr>
                    <td class="header"><label for="newsLetter">News letter:</label></td>
                    <td><input class="form-control" type="number" id="newsLetterAmount" ng-model="staff.newsLetterAmount" /></td>
                    <td><input class="form-control" type="number" id="newsLetterFrequency" ng-model="staff.newsLetterFrequency" /></td>
                    <td><input class="form-control" type="number" id="newsLetterPercent" ng-model="staff.newsLetterPercent" /></td>
                </tr>
       </table>

    <div class="row margin-top">
        <div class="col-sm-4 col-sm-offset-4">
            <button class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button>
        </div>
    </div>  

信息存储在一个对象中,后来用于为用户运行一些计算,建议使用角度1.2添加一些基本验证的方法,如果值为空,则不允许用户继续？对不起,这是我的第一个角度应用.我在过去使用模糊等进行了JavaScript验证,但似乎我可以使用Angular它会更简单.

Answer 1

在AngularJS中,form指令自动绑定到找到的表单元素.您不必使用表单元素.你可以简单地使用ng-form.

<table ng-form="exampleForm">
  ...
</table>

这会在元素上创建一个FormController,并将"表单"添加到本地范围,并可在那里访问(例如$scope.exampleForm).

我在这里写了一个示例plunker 并做了几件事.

1. 我将ng-form指令添加到表中.
2. 我添加required到第一个输入元素
3. 我将ng-disabled指令添加到按钮并将其绑定到$invalid窗体的属性.

一旦第一个输入有值,您将看到该按钮变为启用状态.

另外,我强烈建议从1.2.x升级.您可能错过了许多安全性,稳定性和性能更新.