如何使用NG-禁用，以防止用戶重新提交表單

我試圖阻止用戶從下方如何使用NG-禁用，以防止用戶重新提交表單

<button class="submit" ng-disabled="form_login.$submitted" type="submit"></button>

代碼重新提交登錄表單但是，這將禁用只要提交按鈕，按鈕即使用戶提交了無效數據，也會被點擊。只有在提交有效信息後才停止提交按鈕的正確方法是什麼？

來源

2016-01-06 vincentf

您是否試圖與 'form_login $無效' –

您可以使用ng-required屬性（ directive），它將檢查元素的狀態。

試試這個：

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <form action="#" method="post" name="myForm"> 
 
    Name:: 
 
    <input type="text" ng-model="name" ng-required='true'> 
 
    <input type="submit" ng-disabled="myForm.$invalid" value="Submit"> 
 
    </form> 
 
</body> 
 

 
</html>

Live example

來源

2016-01-06 06:57:55 Rayon

雖然你的問題是不明確的，但你可以試試這個，

這裏是HTML：

<form action="#" method="post"> 
    Name::<input type="text" ng-model="name" ng-keyup="dirty()"> 
    Address::<input type="text" ng-model="address" ng-keyup="dirty()"> 
    <input type="submit" ng-disabled="error" value="Submit"> 
</form>

這裏是JS：

angular.module('myApp', []).controller('ctrl', function($scope){ 

    $scope.error = true; //Disables button initially 

    $scope.dirty = function(){ 
     if($scope.name!='' && $scope.address!='')//Check conditions here 
      { 
      $scope.error = false; //Enables the button 
      } 
    } 
});

來源

2016-01-06 06:52:24 Joydeep

如何使用NG-禁用，以防止用戶重新提交表單

回答

相關問題