Question

我有以下HTML代码：

<form ng-submit="login()" novalidate>
    <div class="row">
        <div class="col-xs-12">
            <input type="email" 
                    class="input-large text-field-gra" 
                    ng-model="email"
                    maxlength="50"
                    required 
                    placeholder="<?php echo __('E-mail') ?>"/>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <input type="password" 
                    class="input-large text-field-gra" 
                    ng-model="password"
                    minlength="4"
                    maxlength="10"
                    required 
                    placeholder="<?php echo __('Senha') ?>"/>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <button type="submit" 
                    class="btn btn-default-rb btn-large center-block">
                    <?php echo __('Entrar') ?>
            </button>
        </div>
    </div>
</form>

我有跟随控制器片段：

usersApp.controller('userApp.controller', [ '$scope', '$http', '$location',
    function($scope, $http, $location ) {

        var base = document.getElementById('local_url').href;

        $scope.login = function() {

            //This code is the problem
             var e = angular.element( document.querySelector( '#email' ) );
             e = $(scope.$element);


            if( e.hasClass( 'ng-invalid-email' ) ) {
                bootbox.alert( 'O e-mail digitado é inválido' );//This e-mail is invalid.
                return;
            }
         ....

我想知道该元素是否有一个类（在这个casng-invalid-email中），但我不知道如何做到这一点。

我无法使用默认验证，我需要显示消息，控制器无需验证即可运行。

你能帮助我吗？

Answer 1

您应该使用angular form validation directives并在表单无效时停用提交按钮。

<button type="submit" ng-disabled="form.$invalid" ng-click="login()" class="btn btn-default-rb btn-large center-block">

以下是您解决方案的小提琴：http://jsfiddle.net/4dt3mruq/28/

如何从AngularJS控制器访问元素属性

1 个答案: