在stuff []中至少添加了一项之前,整个表单才有效。当用户在文本框中输入一个值,然后单击添加时,然后将该值添加到stuff []中,只有在这时将值添加到stuff []中才应启用提交按钮。但是,只要用户在不单击添加的情况下在文本框中键入任何内容,从而没有在东西[]中键入任何内容,它就会使表单有效并启用提交按钮。

<form ng-app="myApp" ng-controller="myCtrl" name="myForm" ng-submit="submit()" novalidate>
    <div ng-repeat="things in stuff">
        <table><tr><td>{{things}}</td></tr></table>
    </div>

    <input type="text" name="app" ng-model="input" ng-required="!stuff[0]" />

    <button ng-disabled="!input" ng-click="add()">
        <span> add</span>
    </button>

    <input type="submit" value="Submit" ng-disabled="myForm.$invalid" />

    <script>
        angular.module('myApp', []).controller('myCtrl', function ($scope) {
            $scope.stuff = [];
            $scope.input = null;

            $scope.add = function () {
                var l = $scope.stuff.length;
                $scope.stuff[l] = $scope.input;
                $scope.input = null;
            };
            $scope.submit = function () {};
        });
    </script>
</form>

最佳答案

[编辑]
要直接回答您的问题:当数组中没有任何内容时,!stuff[0]为TRUE,否则为FALSE。如果为TRUE,则需要输入,从而使表格“最初”无效。在输入中输入内容后,即已满足要求,这意味着该表单有效,并且您现在可以单击“提交”按钮。该条件实际上与将某些内容实际放入数组无关。

如下面我的答案所建议,可以通过在stuff.length上附加条件来解决此问题。它不会使表单无效(您可以在其他位置轻松解决此问题),但是它将至少禁用“提交”按钮。
[/编辑]

我不明白为什么要在这里输入ng,因为您想禁用“提交”按钮,这意味着逻辑应该附加到“提交”按钮上,而不是输入文本框中。

我会这样做:

<input type="text" name="app" ng-model="input"/>

<button ng-disabled="!input" ng-click="add()">
    <span> add</span>
</button>

<input type="submit" value="Submit" ng-disabled="stuff.length == 0" />


如果没有东西,它将禁用提交按钮。

07-24 09:47
查看更多