如何在不使用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/