Question

我正在使用angularjs登录并忘记密码模块。

我的代码是

<body data-ng-cloak data-ng-app="LoginModule" data-ng-controller="LoginController">
    <div id="login-page">
        <div class="container" data-ng-show="ShowLoginBox">     
            <form class="form-login" id="LoginForm" autocomplete="off" enctype="multipart/form-data" name="LoginForm" novalidate="" data-ng-submit="LoginData(SALogin)">

                <h2 class="form-login-heading">Login in now</h2>
                <div class="login-wrap">
                    <div class="alert alert-danger alert-dismissable" data-ng-show="showWarningAlert">
                      <button type="button" class="close" data-ng-click="switchBool('showWarningAlert')">×</button><strong>{{WarningAlert}}</strong>
                    </div>
                    <div class="alert alert-success alert-dismissable" data-ng-show="showSuccessAlert">
                      <button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')">×</button><strong>{{SuccessAlert}}</strong>
                    </div>

                    <input type="email" class="form-control" placeholder="Email-Id"  id="email" name="email" data-ng-model="SALogin.email" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" required autofocus />                       
              <div class="error" data-ng-show="LoginForm.email.$dirty && LoginForm.email.$invalid">
                        <small class="error" data-ng-show="LoginForm.email.$error.required">Email-Id is required.</small>
                        <small class="error" data-ng-show="LoginForm.email.$error.email">Invalid Email-Id.</small>
                    </div>                           
                    <br>
                    <input type="password" class="form-control" placeholder="Password" maxlength="20" name="password" id="password" data-ng-model="SALogin.password" data-ng-minlength="8" data-ng-maxlength="20" required />
                    <div class="error" data-ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid">
                        <small class="error" data-ng-show="LoginForm.password.$error.required">Password is required.</small>
                        <small class="error" data-ng-show="LoginForm.password.$error.minlength">Password is required to be at least 8 characters</small>
                        <small class="error" data-ng-show="LoginForm.password.$error.maxlength">Password cannot be longer than 20 characters</small>
                    </div>



                    <label class="checkbox"><span class="pull-right"><a href="#" data-ng-click="ForgotPwdBox()"> Forgot Password?</a></span></label>
                    <button class="btn btn-theme btn-block" type="submit" data-ng-disabled="LoginForm.$invalid" ><i class="fa fa-lock"></i> LOGIN</button>
                    <hr>            
                </div>  
            </form>
        </div>

        <div class="container" data-ng-show="ShowForgotPwdBox">     
            <form class="form-login" id="ForgotPwdForm" autocomplete="off" enctype="multipart/form-data" name="ForgotPwdForm" novalidate="" data-ng-submit="ForgotPwdData(SAForgotPwd)">
                <h2 class="form-login-heading">Get New Password</h2>
                <div class="login-wrap">
                    <div class="alert alert-danger alert-dismissable" data-ng-show="showWarningAlert">
                      <button type="button" class="close" data-ng-click="switchBool('showWarningAlert')">×</button><strong>{{WarningAlert}}</strong>
                    </div>
                    <div class="alert alert-success alert-dismissable" data-ng-show="showSuccessAlert">
                      <button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')">×</button><strong>{{SuccessAlert}}</strong>
                    </div>

                    <input type="email" class="form-control" placeholder="Email-Id"  id="email" name="email" data-ng-model="SAForgotPwd.email" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" required autofocus />                       
              <div class="error" data-ng-show="ForgotPwdForm.email.$dirty && ForgotPwdForm.email.$invalid">
                        <small class="error" data-ng-show="ForgotPwdForm.email.$error.required">Email-Id is required.</small>
                        <small class="error" data-ng-show="ForgotPwdForm.email.$error.email">Invalid Email-Id.</small>
                    </div>

                    <label class="checkbox"><span class="pull-right"><a href="#" data-ng-click="LoginBox()"> Back to Login?</a></span></label>
                    <button class="btn btn-theme btn-block" type="submit" data-ng-disabled="ForgotPwdForm.$invalid" ><i class="fa fa-lock"></i> Get New Password</button>
                    <hr>            
                </div>  
            </form>
        </div>
    </div>
</body>

当用户点击忘记密码时，隐藏登录表单并显示忘记密码表单，然后用户输入他/她的emailid并提交表单。在用户提交表单后，我显示带有消息框和成功消息。但我无法清除表单数据，然后显示成功/失败消息

我的Js代码在这里

var Login = angular.module("LoginModule", [])
Login.controller("LoginController", function ($scope, $http, jsonFilter)
{
    $scope.ShowLoginBox = true;
    $scope.ShowForgotPwdBox = false;
    $scope.showWarningAlert = false;
    $scope.showSuccessAlert = false;

    var logResult = function (data, status, headers, config)
    {
        return data;
    };

    $scope.LoginData = function (SALogin)
    {
        var config = {  params: { SALogin: SALogin }    };

        $http.post("login-process.php", null, config)
        .success(function (data, status, headers, config)
        {
            $scope.getCallJSONResult = logResult(data, status, headers, config);
            if(data=="Success")
            {
                window.location.href = "dashboard.php";
                $scope.SuccessAlert = data;
            $scope.showSuccessAlert = true;
            $scope.showWarningAlert = false;
            }

            if(data!="Success")
            {
                $scope.WarningAlert = data;
            $scope.showWarningAlert = true;
            }

            //switch flag
            $scope.switchBool = function (value) {
                $scope[value] = !$scope[value];
            };
        })

        .error(function (data, status, headers, config)
        {
            $scope.getCallJSONResult = logResult(data, status, headers, config);
        });
    };

    $scope.ForgotPwdBox = function () {
        $scope.ShowForgotPwdBox = true;
        $scope.ShowLoginBox = false;

        $scope.ForgotPwdData = function (SAForgotPwd)
        {
            var config = {  params: { SAForgotPwd: SAForgotPwd }    };

            $http.post("forgot-password-process.php", null, config)
            .success(function (data, status, headers, config)
            {
                $scope.getCallJSONResult = logResult(data, status, headers, config);
                if(data=="Success")
                {
                    $scope.SuccessAlert = "Check your mail for new password";
                $scope.showSuccessAlert = true;
                $scope.showWarningAlert = false;
                }

                if(data!="Success")
                {
                    $scope.WarningAlert = data;
                $scope.showWarningAlert = true;
                }

                //switch flag
                $scope.switchBool = function (value) {
                    $scope[value] = !$scope[value];
                };
            })

            .error(function (data, status, headers, config)
            {
                $scope.getCallJSONResult = logResult(data, status, headers, config);
            });
        };
    };

    $scope.LoginBox = function () {
        $scope.ShowLoginBox = true;
        $scope.ShowForgotPwdBox = false;
    };
});

我不知道如何在不打扰消息框的情况下清除数据。

Answer 1

显示带有和成功消息的消息框

试试这个

$scope.SALogin = {};

Answer 2

就像@Saurabh所说，你必须清除模型，因此它会显示为空

$scope.SALogin = {};

删除所需的只需将表单设置为：

$scope.LoginForm.$setPristine();
$scope.LoginForm.$setUntouched();

和另一种形式的相同程序，它将起作用

如何使用AngularJS提交表单数据并显示消息？

2 个答案: