AngularJS 表单验证在表单外的 href 链接上触发

Question

我想要一个 AngularJS 登录表单以允许链接注册为新用户：

链接在表单之外编码（见下面的-->和

<div layout="row" layout-align="center center">
<div ng-cloak layout="column" style="width: 300px; background-color: white; border: 2px solid rgb(142, 169, 222); padding: 0px 5px 5px 5px">
    <form ng-app="WebApp" ng-controller="VendorLoginCtrl" name="userForm">
        <div layout="column" layout-align="top left">
            <h2 flex>Vendor Login</h2>
            <md-input-container flex class="md-block" style="margin: 5px 0px 0px 0px"> 
                <label>User Login</label>
                <input name="login" ng-model="user.login" autocomplete="username" required/>
                <div ng-messages="userForm.login.$error">
                    <div ng-message="required">User Login is required.</div>
                </div>
            </md-input-container>
            <md-input-container flex class="md-block" style="margin: 10px 0px 0px 0px">
                <label>Password</label>
                <input name="password" type="password" ng-model="user.password" autocomplete="current-password" required/>
                <div ng-messages="userForm.password.$error">
                    <div ng-message="required">Password is required.</div>
                </div>
            </md-input-container>
            <md-button class="md-primary" ng-click="login(user)">LOG IN</md-button>
            <div class="ng-hide errorMessage" ng-show="loginFailed">Login Failed - Please try again</div>
            <div class="ng-hide errorMessage" ng-show="validationFailed">Input Invalid - Please correct and resubmit</div>
        </div>
    </form>
    --><div layout="row" layout-align="center center"><a ng-href="javascript:angular.element(document.getElementById('VendorLoginCtrl')).scope().register();">Not a User? Register here.</a></div><--
</div>

如果点击链接，如何防止表单验证？

Answer 1

好的。我的href 标记需要在 包含表单的div 之外。 即：

    </form>
</div>
<div layout="row" layout-align="center center"><a href="" ng-click="register()">Not a User? Register here.</a></div>

Answer 2

您可以通过封装 ng-app 和 ng-controller 是一个单独的 <div> 和 '不是用户？在此处注册'链接也将以这种方式在控制器内部。

由于register() 函数将独立于验证，您可以使用ng-click 来使用它，它会像一个魅力一样工作。

sn-p 如下图所示：

<div layout="row" layout-align="center center">
<div ng-cloak layout="column" style="width: 300px; background-color: white; border: 2px solid rgb(142, 169, 222); padding: 0px 5px 5px 5px">
 --> <div ng-app="WebApp" ng-controller="VendorLoginCtrl" >  <--
    <form name="userForm">
        <div layout="column" layout-align="top left">
            <h2 flex>Vendor Login</h2>
            <md-input-container flex class="md-block" style="margin: 5px 0px 0px 0px"> 
                <label>User Login</label>
                <input name="login" ng-model="user.login" autocomplete="username" required/>
                <div ng-messages="userForm.login.$error">
                    <div ng-message="required">User Login is required.</div>
                </div>
            </md-input-container>
            <md-input-container flex class="md-block" style="margin: 10px 0px 0px 0px">
                <label>Password</label>
                <input name="password" type="password" ng-model="user.password" autocomplete="current-password" required/>
                <div ng-messages="userForm.password.$error">
                    <div ng-message="required">Password is required.</div>
                </div>
            </md-input-container>
            <md-button class="md-primary" ng-click="login(user)">LOG IN</md-button>
            <div class="ng-hide errorMessage" ng-show="loginFailed">Login Failed - Please try again</div>
            <div class="ng-hide errorMessage" ng-show="validationFailed">Input Invalid - Please correct and resubmit</div>
        </div>
    </form>
    -->  <div layout="row" layout-align="center center"><a href="#" ng-click="register()">Not a User? Register here.</a></div>   <--
   </div>

</div>