Angularjs在提交后禁用提交按钮，如果在表单中进行了任何更改，则启用

Question

我需要在点击时禁用提交按钮，并在对表单进行任何更改时启用它。

HTML

<div class="form-group">
        <button type="submit" href="#" ng-click="HeadCount()" class="btn btn-primary btn-lg" ng-hide="submitButton" ng-disabled="!model.selectedRole">SUBMIT</button>
</div> 

在此代码中，我在单击提交按钮时调用函数。

控制器

我的控制器在单击一次时禁用我的提交按钮：

$scope.HeadCount = function() {      
    console.log("headcount");
    $scope.showGraph = !$scope.showGraph;
    $scope.submitButton = true;

    if ($scope.showGraph) {
            /* rest of my code which show the result image */
    }
}

Answer 1

https://docs.angularjs.org/api/ng/directive/ngDisabled

你甚至有例子：P

HTML：

<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<button ng-model="button" ng-disabled="checked">Button</button>

JS：

it('should toggle button', function() {
  expect(element(by.css('button')).getAttribute('disabled')).toBeFalsy();
  element(by.model('checked')).click();
  expect(element(by.css('button')).getAttribute('disabled')).toBeTruthy();
});

您还可以使用$watch()检查表单范围是否正在更改，然后启用按钮。

编辑： 您可能还想在手册中检查ngChange和ngInit： https://docs.angularjs.org/api/ng/directive/ngChange

https://docs.angularjs.org/api/ng/directive/ngInit