清除文本输入并禁用按钮onclick Angularjs答案

【问题标题】：Clear text input and disable button onclick Angularjs清除文本输入并禁用按钮onclick Angularjs
【发布时间】：2018-03-20 20:34:47
【问题描述】：

您好，我有一个案例，我在输入表单时禁用了提交按钮，只有在输入框有一些文本时才启用它。

<div id="app-id-input-container" ng-form="appIdInput">
    <div class="input-group">
        <input id="app-id-input" name="appIdInput" ng-click="clearAppIdInput()" class="form-control" type="text" ng-model="appId" pattern="^[AaIi][PpXxNn][0-9]{6}$" maxlength="8" />
        <span class="input-group-btn">
            <button id="addAppId" class="btn btn-success" ng-click="preferences.appIdInput.$valid && addAppId()" type="button">&nbsp;<span class="glyphicon glyphicon-plus"></span></button>
        </span>
    </div>
    <span class="validation-alert" ng-show="appIdError">{{appIdError}}</span>
</div>

当用户在输入框内点击时，我清除该字段。

$scope.clearAppIdInput = function() {
    $scope.appId = "";
};

即使范围为空，按钮也不会被禁用。

这就是我禁用按钮的方式。

$(document).ready(function(){
    $('#addAppId').prop('disabled',true);

    $('#app-id-input').keyup(function(){
        $('#addAppId').prop('disabled', this.value == "" ? true : false);
    });
});

现在，我可以通过单击键盘上的“退格”来再次禁用该按钮吗？

当我使用单击清除输入字段时，如何再次禁用该按钮？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

按照 Angular 的方式，我建议使用 ngDisabled 指令：

<button ng-disabled="!appId" id="addAppId" class="btn btn-success"
        ng-click="preferences.appIdInput.$valid && addAppId()" 
        type="button">&nbsp;<span class="glyphicon glyphicon-plus"></span>
</button>

虽然如果$scope.appId 为空或未定义，按钮将被禁用。不需要 jQuery 或任何特殊的处理程序。

【讨论】：

您能否用 plunker 示例解释您的答案。在此先感谢:-)

【解决方案2】：

<button id="addAppId" class="btn btn-success" ng-click="preferences.appIdInput.$valid && addAppId()" type="button">&nbsp;<span class="glyphicon glyphicon-plus" ng-disabled="!appId"></span></button>

ng-disabled="!appId" 将在 $scope.appId 为空、未定义或 null 时禁用您的按钮。

简单的 sn-p 示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script> 
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.appId = "";
        
        $scope.clearAppId = function(){
          $scope.appId = "";
        }
    });
</script>  
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <button class="btn btn-default" ng-disabled="!appId">Disable This</button>
    <input type="text" ng-click="clearAppId()" ng-model="appId"/>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

该字段仅在您按键时检查是否禁用。

您应该在清除输入后调用 disable：

$scope.clearAppIdInput = function() {
    $scope.appId = "";
    $('#addAppId').prop('disabled', true);
};

但来自 dhilt 的答案是更棱角分明的风格，看起来更清晰。

【讨论】：