Question

HTML：

<button class="btn btn-primary btn-xs" ng-click="toggleForm()">Add translation</button>
<form class="block form-inline" id="translation_form" ng-show="form" ng-submit="addTranslation()">
    <h4>
        Enter a new translation for this text in {{language | uppercase}}:
        <button class="close" ng-click="toggleForm()" title="Close form">&times;</button>
    </h4>
    <hr />
    <div class="form-group">
        <input type="text" class="form-control" ng-model="formData.text" />
        <button type="submit" class="btn btn-primary btn-sm">Add</button>
    </div>
</form>

JS：

$scope.formData = {
    text: ''
};

$scope.toggleForm = function()
{
    if ($scope.form)
    {
        console.log('form closed', $scope.formData.text);
        $scope.form = false;
        $scope.formData.text = '';
    }
    else
    {
        $scope.form = true;

        if ($scope.history
            && ($scope.history.length > 0))
        {
            // set some default text
            $scope.formData.text = $scope.history[0].translation;
        }

        console.log('form opened', $scope.formData.text);
    }
};

$scope.addTranslation = function()
{
    console.log('adding translation', $scope.formData.text);
    // ajax call to post the text
    callback = function()
    {
        $scope.form = false;
        $scope.formData.text = '';
    }
};

问题：当我打开表单时，键入一些文本并单击＆＃34;添加＆＃34;按钮，控制台中记录以下文本：

form opened {some text here}
adding translation {some text here}

但是如果我打开表单并在聚焦于输入字段时点击Enter，则会记录以下内容：

form opened {some text here}
form closed {some text here}
adding translation {NO text here, because toggleForm empties the variable}

显然，这是一个问题，因为我希望能够通过点击Enter来提交表单。问题是 - 为什么会发生这种情况以及如何预防呢？

编辑：通过将HTML结构更改为以下内容来避免此问题：

<div class="block" ng-show="form">
    <h4>
        Enter a new translation for this text in {{language | uppercase}}:
        <button class="close" ng-click="toggleForm()" title="Close form">&times;</button>
    </h4>
    <hr />
    <form class="form-inline" id="translation_form" ng-submit="addTranslation()">
        <div class="form-group">
            <input type="text" class="form-control" ng-model="formData.text" />
            <button type="submit" class="btn btn-primary btn-sm">Add</button>
        </div>
    </form>
</div>

但是，我仍然没有回答为什么AngularJS甚至首先调用了关闭按钮的onclick事件......

Answer 1

这个回应有点迟了，但是这个问题在今天下午让我的团队绊倒了 - 希望我们的经验会帮助别人。

仅将属性type="button"添加到按钮对象即可实现 - 无需任何其他更改。这实际上是一个很好的属性，可以添加到表单上任何不明确表单提交按钮的按钮。

<button class="close" type="button" ng-click="toggleForm()" title="Close form">&times;</button>

Answer 2

从添加按钮中移除'type="submit"'，然后使用ng-click="addTranslation()"。同时从ng-submit代码中删除form，如下所示

<button class="btn btn-primary btn-xs" ng-click="toggleForm()">Add translation</button>
<form class="block form-inline" id="translation_form" ng-show="form">
    <h4>
        Enter a new translation for this text in {{language | uppercase}}:
        <button class="close" ng-click="toggleForm()" title="Close form">&times;</button>
    </h4>
    <hr />
    <div class="form-group">
        <input type="text" class="form-control" ng-model="formData.text" />
        <button class="btn btn-primary btn-sm" ng-click="addTranslation()">Add</button>
    </div>
</form>

如何使用角度JS来阻止表单提交进入按键？

2 个答案: