Angular如何提交和驗證表單

Question

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="login.css"> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head>
<body ng-app="loginApp">
<div class="container">
<div class="login_logo">
</div>
<div class="form_container" ng-controller="loginCtrl" >
<div class="error_msg" ng-if="form_login.username.$dirty" ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">Username and password are required</div>
</div>
<div class="form_left">
<form class="form_login" name="form_login" ng-submit="submitForm()" novalidate>
<div class="usr"><input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required /></div>
<div class="psw"><input id="password" name="password" ng-model="password" type="password" required /></div>
</form>
</div>
<div class="form_right">
<a class="submit" href="" ng-click="submitForm()">submit</a>
</div>
<div class="clear"></div>

</div>
</div>
<script type="text/javascript">
    var app=angular.module("loginApp",["ngMessages"]);
    app.controller("loginCtrl", function($scope){
        $scope.username = "";
        $scope.password = "";
        $scope.submitForm=function(){
        };
    });
</script>
</body> 
</html>

現在我有一個上面顯示的登錄頁面，我正在嘗試使用ngMessages進行驗證

如果我必須使用表單之外的<a>而不是按鈕來提交它，該怎么辦？
當用戶名或密碼為空時，並且僅在用戶提交表單后，才能確保顯示錯誤消息。
如何防止用戶使用<a>重新提交表單？

Answer 1

您可以使用以下命令在控制器功能中檢查驗證結果：

if ($scope.form_login.$valid) {
    ...
}

angularjs中的表格將自動驗證。 對於所有表單成員，您都可以檢查文檔

Answer 2

要僅在表單提交后顯示錯誤消息，請添加變量“ $ scope.submitted = true;”。 為了防止重新提交，可以禁用提交按鈕。 請參考以下鏈接以獲取詳細說明。 https://scotch.io/tutorials/angularjs-form-validation

希望能幫助到你。

Angular如何提交和驗證表單

問題描述

2 個解決方案

解決方案1
0 2016-01-06 05:17:41

解決方案2
0 已采納 2016-01-06 06:16:53

Angular如何提交和驗證表單

問題描述

2 個解決方案

解決方案1 0 2016-01-06 05:17:41

解決方案2 0 已采納 2016-01-06 06:16:53

解決方案1
0 2016-01-06 05:17:41

解決方案2
0 已采納 2016-01-06 06:16:53