Проверка формы AngularJS запускается по ссылке href вне формы

Question

Я хочу, чтобы форма входа в AngularJS позволяла ссылке регистрироваться как новый пользователь:

Ссылка закодирована вне формы (см. Индикаторы -> и <- ниже): </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">
    <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

Вы можете упростить свой код, инкапсулировав 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>

Answer 2

OK. Мой тег href должен быть за пределами div, заключающего форму. а именно:

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