Question

我有这样的示例代码：

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

逻辑：

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

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

Answer 1

您可以使用UITabBarController来确定表单是否有任何更改，然后启用按钮：

   function void foo_arr_bit (int seed, ref bit [*] mem, string  mem_name);
      for (int i=0; i< mem.size(); i++)
    mem[i] = my_randomize_int(seed, mem[i], mem_name);     
   endfunction: foo_arr_bit

请注意foo_arr_bit(seed, data_bit, "data_bit");上使用$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。您可以使用方法$pristine：

ng-disabled

请注意，有一个表单参数用于将表单传递给方法。在HTML中，您还需要将此参数作为ng-disabled="myForm.$invalid || myForm.$pristine"的一部分传递：

$setPristine

这是JSFiddle that demonstrates the functionality

有关详细信息，请查看documentation of FormController。

Answer 2

您在表单无效时禁用了提交按钮。

myForm.$invalid

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

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

Answer 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。

Angularjs +禁用并启用提交按钮

3 个答案: