Question

我使用Angular和Ionic创建了一个混合应用程序，但是当我填写表单并按下 GO 按钮或Android上的箭头按钮时，它会提交我的表单，即使它还没有效。我试图检测到按键和return:false;，但它仍然提交了它。

    <form novalidate name="questionForm" id="questionForm" ng-submit="submit()">
        <input name="question" ng-model="form.question" ng-minlength="10" required autofocus/>
        <div id="answers">
<input ng-model="choice.choice" placeholder="Voeg antwoord toe" required ng-keypress="disableGo()" />
        </div>
        <button type="submit" ng-disabled="questionForm.$invalid" class="circle-btn btn-send ion-ios-paperplane"></button>
    </form>

按键功能：

    $scope.disableGo = function () {
        var code = (event.keyCode ? event.keyCode : event.which);
        if ((code == 13) || (code == 10)) {
            return false;
        }
    };

Answer 1

按钮可以为您的按钮添加类型

  <button type="button"></button>

Answer 2

使用type='button'代替submit

您不需要disableGo

试试这个：

<form novalidate name="questionForm" id="questionForm">
  <input name="question" ng-model="form.question" ng-minlength="10" required autofocus/>
  <div id="answers">
    <input ng-model="choice.choice" placeholder="Voeg antwoord toe" required ng-keypress="disableGo()" />
  </div>
  <button type="button" ng-disabled="questionForm.$invalid" class="circle-btn btn-send ion-ios-paperplane" ng-click="submit()"></button>
</form>

在ng-click上使用button代替ng-submit

Answer 3

你可以查看这个

在控制器中添加一个功能：

$scope.canSubmit = function () {
        return ($scope.questionForm.$dirty && $scope.questionForm.$invalid) || $scope.questionForm.$pristine
};

在html中：使用type="button"

<button type="button" ng-disabled="canSubmit()" class="circle-btn btn-send ion-ios-paperplane"></button>

“GO”按钮提交表单

3 个答案: