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来使用它，并且它会像超级按钮一样工作。

该片段的插图如下：

<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>

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

2 个答案: