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 here并做了几件事。

我在表中添加了ng-form指令。
我将required添加到第一个输入元素
我将ng-disabled指令添加到按钮并将其绑定到表单的$invalid属性。

一旦第一个输入有值，您就会看到该按钮变为启用状态。

另一方面，我高度建议从1.2.x升级。您可能错过了许多安全性，稳定性和性能更新。

Answer 2

如果您使用表单，则表单是formname默认的句柄验证。$ isvalid，fromname。$ dirty等

如果您不想使用表单标记，则需要使用ng-show通过手动条件来显示/隐藏带双向绑定的错误消息。

喜欢

<input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /> 

<span style="color:red" ng-show="staff.inductionAmount === undefined || staff.inductionAmount === ''"> idection name is required</span>

另一种方式与您在使用on-focus的javascript中所做的相同，这与使用ng-fucus和ng-show/ng-hide方式的方式相同。

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

2 个答案: