[英]Page was loaded after validate the form ng-click function not working
我是angularjs的新手。 我正在驗證觸發保存功能的表格。
我將控件放置在表單中,並將其命名為myform 。
我在ng-required="true"
名稱和密碼”文本框中使用ng-required="true"
。
在“ 保存”按鈕的ng-click
中,我調用save()
函數
<div ng-app="myApp" ng-controller="myControl">
<form name="myForm" novalidate>
<table>
<tr>
<td>
Name
</td>
<td>
<input type="text" class="form-control" id="txtName" name="Name" placeholder="Name"
ng-model="Name" ng-required="true">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" class="form-control" id="txtPassword" placeholder="Password"
ng-required="true" name="Password" ng-model="Password">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" class="form-control" id="Email" placeholder="Email" name="Email"
ng-model="Email">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="save()"> Save </button>
</td>
</tr>
</table>
</form>
</div>
在save()
函數中,我驗證該表單並發出警告,說明該表單有效還是無效。
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myControl", function ($scope, $http) {
$scope.save = function () {
if ($scope.myForm.$valid) {
alert('Valid');
} else {
alert('Invalid');
}
};
});
</script>
現在它將觸發驗證消息
輸入名稱和密碼並提交表單后,頁面已加載,但未觸發警告消息。
我將假設它正在嘗試調用表單的操作,這沒什么,所以它將重新加載頁面。 您可以使用ng-submit來阻止默認操作。
var app = angular.module("myApp", []); app.controller("myControl", function($scope, $http) { $scope.save = function() { if ($scope.myForm.$valid) { alert('Valid'); } else { alert('Invalid'); } }; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myControl"> <form name="myForm" novalidate ng-submit="save()"> <table> <tr> <td> Name </td> <td> <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password"> </td> </tr> <tr> <td> Email </td> <td> <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email"> </td> </tr> <tr> <td colspan="2" align="right"> <button type="submit"> Save </button> </td> </tr> </table> </form> </div>
或者,如果您確實想保持ng-click
,則可以在save方法中傳遞事件並在該位置阻止它
var app = angular.module("myApp", []); app.controller("myControl", function($scope, $http) { $scope.save = function(e) { e.preventDefault() if ($scope.myForm.$valid) { alert('Valid'); } else { alert('Invalid'); } }; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myControl"> <form name="myForm" novalidate> <table> <tr> <td> Name </td> <td> <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password"> </td> </tr> <tr> <td> Email </td> <td> <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email"> </td> </tr> <tr> <td colspan="2" align="right"> <button type="submit" ng-click="save($event)"> Save </button> </td> </tr> </table> </form> </div>
這是你應該做的
<form ng-submit="myForm.$valid && save()" name="myForm">
<button type="submit">Submit</button>
</form>
如果表單無效,此簡單代碼段ng-submit="myForm.$valid && save()"
將不會調用save
。 這是有角度的方法-將所有驗證與業務邏輯分開。 僅當所有表單數據均有效時,才應執行save
方法。
基本輸入驗證指令很多: minlength, maxlength, required, pattern and etc.
。 AngularJS有一個很棒的機制,允許您創建自己的驗證( 這是一篇很棒的文章,介紹了如何為輸入實現自定義驗證,以防萬一。)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.