如何在不使用Angular JS視圖的情況下使用Angular JS訪問HTML頁面中的不同表單元素

Question

嗨，我是Angular Js的新手，我試圖制作一個Login頁面，該頁面具有以下三種形式：

1. 登錄表單
2. 創建新帳戶表格
3. 忘記密碼表格。

所有這些形式都存在於一個HTML頁面中。login（login.html）的HTML頁面如下：

 <form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController"  >
        <h3 class="form-title">Sign In</h3>
        <div class="alert alert-danger display-hide">
            <button class="close" data-close="alert"></button>
            <span>
        Enter any username and password. </span>
        </div>
        <div class="form-group">
            <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
            <label class="control-label visible-ie8 visible-ie9">Email Address</label>
            <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
        </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">Password</label>
            <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off"  placeholder="Password" name="password" ng-model="password"/>
        </div>
        <div class="form-actions"  >
            <button type="submit" class="btn btn-success uppercase">Login</button>
            <a href="javascript:;" id="forget-password" class="forget-password">Forgot Password?</a>
        </div>
        <div class="create-account">
            <p>
                <a href="javascript:;" id="register-btn" class="uppercase">Create an account</a>
            </p>
        </div>
    </form>


<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
        <h3>Sign In</h3>
        <div class="form-group">
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
        </div>
    </form>

<form class="register-form" action="select_pricing.html" method="post">
        <h3>Create Account</h3>
        <p class="hint">
            Enter your personal details below:
        </p>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">Full Name</label>
            <input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
        </div>
        <div class="form-group">
            <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
            <label class="control-label visible-ie8 visible-ie9">Email Address</label>
            <input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
        </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">Password</label>
            <input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
        </div>
        <div class="form-group margin-top-20 margin-bottom-20">
            <label class="check">
                <input type="checkbox" name="tnc" /> I agree to the <a href="#">
        Terms of Service </a> & <a href="#">
        Privacy Policy </a>
            </label>
            <div id="register_tnc_error">
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
        </div>
    </form>

忘記密碼的Angular Controller如下

 var myApp = angular.module('Login_Upquire_Angular',[]);
 myApp.controller("ForgetPassword",['$scope',function($scope){
   $scope.passwordGenerator=function(){
    var email_id=$scope.ForgetPassEmailId;
       if (email_id=="abc@gmail.com"){
        console.log("Reset Request is accepted");
        window.location="/login.html";
      }
    }
}]);

如您所見，基於我的Angular js文件，我想檢查給定的密碼是否與abc@gmail.com匹配，如果是，則應在我的控制台上顯示“接受重置請求”，然后帶我回到登錄頁面（ /login.html）和表單元素（即login-form）。 但是我收到以下錯誤

Cannot POST /login.html

有人可以幫我嗎？ 我已經嘗試過，但是找不到解決方案。

Answer 1

您將必須執行一些異步驗證。 像這樣的東西： http : //www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/