2

在 stuff[] 至少添加了一项之前，整个表单不应有效。当用户在文本框中输入一个值然后单击添加它然后将该值添加到 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>
4

1 回答 1

1

[编辑] 直接回答您的问题：!stuff[0]当数组中没有任何内容时为 TRUE，否则为 FALSE。当它为 TRUE 时，则需要输入，使表单“最初”无效。只要您在输入中输入内容，现在就满足了要求，这意味着表单是有效的，您现在可以单击提交按钮。该条件实际上与实际将某些内容放入数组中无关。

这可以通过附加一个条件来解决，stuff.length正如我在下面的回答中提出的那样。它不会使表单无效（您可以在其他地方轻松使用此条件），但它至少会禁用提交按钮。[/编辑]

我不明白为什么你有 ng-required ，因为你想禁用提交按钮，这意味着逻辑应该附加到提交按钮，而不是输入文本框。

我会这样做：

<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" />

如果内容中没有任何内容，这将禁用提交按钮。

于 2015-06-19T03:46:21.827 回答