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来修复，如下面的答案所建议的那样。它不会使表单无效（您可以轻松地在其他地方使用此条件），但它至少会禁用提交按钮。 [/编辑]

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

我会这样做：

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

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

$ myform.textinput。$ isvalid如果不应该为真

1 个答案: