Angular Form 提交按钮仅在第二次点击时触发答案

【问题标题】：Angular Form submit button only fires on second clickAngular Form 提交按钮仅在第二次点击时触发
【发布时间】：2018-05-24 16:41:00
【问题描述】：

我正在构建一个对 API 进行一些查询的小型网页。如果所有输入的数据都有效，则在点击提交按钮时发生查询。然而，当我从一组单独的元素（文本框、选择框、按钮）调整表单时，我开始不得不点击一次“搜索”，然后再次点击它以触发该功能。

这是怎么回事/我该如何解决？

HTML：

<div id="search" class="centerWrapper">
    <div id="searchArea" class="searchArea">
        <input type="text" class="inputBox" name="charName" ng-model="charName" placeholder="Character Name"></input>
        <select class="selectBox" ng-model="selectedRealm" name="selectedRealm" ng-options="realm.name for realm in realmList">
            <option value="" class="realmPlaceholder" disabled selected>Select Realm Name</option>
        </select>
        <button type="button" ng-click="buttonpress(charName, selectedRealm)" class="searchButton">Search</button>
    </div>
</div>

控制器代码：

$scope.buttonpress = function(charName, realmName){
    if(typeof charName === "undefined" || charName.includes("world") || typeof realmName === "undefined"){
        alert("Please enter a valid Character Name and Realm.")
    } else {
        var request = {name: charName, realm: realmName};
        $http.post('/buttonpress', request)
        .then(function(response) {
            alert(response.data);
        });
    }
}

CSS：

input.searchButton {
    text-align: center;
    width: 79%;
    background-color: #128880;
    color:#ACC8C9;
    border: none;
    margin-top: 5px;
    height: 22%;
}

input.searchButton:hover {
    background-color: rgb(1, 92, 196)
}

input.searchButton:active {
    background-color: #134b58;
    box-shadow: 0 5px rgb(102, 102, 102);
    transform: translateY(4px);
}

注意：我注意到这也只是在启动页面和刷新时。

【问题讨论】：

第一次命中时会发出警报吗？
@Doomenik 不，警报直到第二次命中才会触发。这与我是否将字段留空或填写它们无关。
您的 HTML 格式不正确。你有<input ...></button>。是错字吗？
@Claies 是的，这是一个错字。不幸的是没有解决问题：|也会更正帖子中的错字。
还有更多的错别字，你也没有关闭你的输入字符名。推荐像<input type="".... />

标签： html angularjs forms form-submit ng-submit

【解决方案1】：

哎呀。这就是为什么在凌晨 4:30 之前编码是个坏主意。一些愚蠢的错误将会发生：

$scope.buttonpress = function() {
    $scope.buttonpress = function(){
        if(typeof $scope.charName === "undefined" || $scope.charName.includes(";") || typeof $scope.selectedRealm === "undefined"){
            alert("Please enter a valid Character Name and Realm.")
        } else {
            var request = {name: $scope.charName, realm: $scope.selectedRealm};
            $http.post('/buttonpress', request)
            .then(function(response) {
                // alert(response.data);
                debugger;
                $scope.showBoard = true;
            });
        }
    }
};

谜团的答案：不知何故，我将 buttonPress 放在另一个 buttonPress 中......哎呀。

【讨论】：