javascript - $myform.textinput.$isvalid is true when it should not -
the whole form should not valid until stuff[] has @ least 1 item added it. when user enters in value text box , clicks add adds value stuff[], @ point when value has been added stuff[] should submit button enabled. however, user types text box without clicking add, , nothing in stuff[], makes form valid , enables submit button.
<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>
[edit] answer question directly: !stuff[0]
true when there nothing in array, , false otherwise. when true, input required, making form 'initially' invalid. type input, requirement fulfilled, meaning form valid, , can click submit button. condition has nothing putting array.
this fixable attaching condition stuff.length
proposed answer below. won't make form invalid (which can condition elsewhere) @ least disable submit button. [/edit]
i don't understand why have ng-required there, wanting disable submit button, meaning logic should attached submit button, not input text box.
i instead:
<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" />
which disable submit button if there nothing in stuff.
Comments
Post a Comment