javascript - $myform.textinput.$isvalid 在不应该的时候为真

Question

在 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>

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

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