Angularjs +禁用和启用提交按钮答案

【问题标题】：Angularjs + Disable and Enable submit buttonAngularjs +禁用和启用提交按钮
【发布时间】：2016-12-18 13:42:50
【问题描述】：

我有这样的示例代码：

HTML代码：

<body ng-controller="MainCtrl">
    <form name="myForm">
      <input name="myText" type="text" name="test" ng-model="mytext" required />
      <button ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
    </form>
  </body>

js代码：

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.save = function(){
    //logic or http method
    console.log("Test");
  }
});

附上此链接中的代码：Click Here

逻辑：

默认保存按钮已禁用。
输入表单后启用按钮。
再次保存后禁用保存按钮。
用户再次输入需要启用保存按钮的文本。

注意：这里我只附加了一个输入，但我有多个输入字段。此外，在保存功能中，我将逻辑数据保存到数据库中。

【问题讨论】：

你的问题到底是什么？
您需要检查表单是否脏，这很容易（myForm.$dirty），然后您在 save() 函数中将表单设置为原始，但您的 $scope 会搞砸up，所以你需要检查这个帖子：stackoverflow.com/questions/27191744/setpristine-not-working

标签： javascript angularjs validation

【解决方案1】：

您可以使用$pristine 来识别表单是否有任何更改，然后才启用按钮：

<body ng-controller="MainCtrl">
    <form name="myForm">
        <input name="myText" type="text" name="test" ng-model="mytext" required />
        <button ng-click="save(myForm)" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
    </form>
</body>

注意$pristine 是如何在ng-disabled 上使用的：

ng-disabled="myForm.$invalid || myForm.$pristine"

在这种情况下，如果表单无效或表单没有更改，按钮将被禁用。

如果您使用这种方法，您还需要在保存数据后将表单设置为原始状态。你可以使用方法$setPristine:

$scope.save = function(myForm) {
    // set form to pristine
    myForm.$setPristine();
}

请注意，有一个表单参数用于将表单传递给方法。在 HTML 中，您还需要将此参数作为 ng-click 的一部分传递：

ng-click="save(myForm)"

这里是JSFiddle that demonstrates the functionality

欲了解更多信息，请查看documentation of FormController。

【讨论】：

【解决方案2】：

当表单无效时，您已禁用提交按钮。

myForm.$invalid

因此，当必填字段为空白时，表单将无效并且按钮将被禁用。只要表单中所有必需的输入都有值，提交按钮就会启用。

要使其禁用，您需要在保存完成后重置所需输入的所有模式变量，即在 http 请求成功回调时重置模型变量。

【讨论】：

【解决方案3】：

这就是我的做法，我将添加另一个跟踪变量。像这样的。

$scope.btnStatus = true;
  $scope.save = function(){
    //logic or http method
    $scope.btnStatus = false;
    console.log("Test");
  }
  $scope.onChange = function(){

    if($scope.btnStatus == false)
      $scope.btnStatus = true;
  }

html 看起来像这样。

<form name="myForm">
  <input name="myText" type="text" name="test" ng-change="onChange()" ng-model="mytext" required /> 
  <button ng-click="save()"  ng-disabled="myForm.$invalid || !btnStatus">Save</button>
</form>

这是一个基于您的代码的有效code。

【讨论】：

使用 $pristine 更好，不需要更多的变量或函数
@JohanBlomgren 只是因为有更好的方法可以做到这一点，这并不意味着我应该投反对票。还是谢谢