angular FormController validation

Question

I have this html form:

<div class="modal-body">
        <form name="addAdminForm">
            <div class="form-group addPopupLabel">
                <div class="container-fluid-full" id="email3">
                    <input placeholder="Email" type="text" ng-model="model.email" required />
                </div>

                <div class="container-fluid-full">
                    <input placeholder="Password (at last 6 characters)" type="password" ng-model="model.password1" id="pw1" name="pw1" required />
                </div>

                <div class="container-fluid-full">
                    <input placeholder="Confirm password" type="password" ng-model="model.password2" id="pw2" name="pw2" required password-compare="pw1" />
                </div>
                <div class="container-fluid-full">
                    <label>Admin</label>
                    <input type="radio" class="form-control" name="role" ng-model="model.role" ng-value="userRoles.admin">
                </div>

                <div class="container-fluid-full">
                    <label>CS</label>
                    <input type="radio" class="form-control" name="role" ng-model="model.role" ng-value="userRoles.cs">
                </div>

                <div>
                    <span class="errormessage" style="color:red">{{errormessage}}</span>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-disabled="addAdminForm.$invalid" ng-click="createForm.$invalid || ok()">Submit</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>

The problem: button stay on disable mode while one of the fields is on focus. How can i solve it by FormController?

You can enable submit button and check $invalid in you ok() method, in this way the focus it´s out of the field. If $invalid is true it doesn't continues. — mggSoft
– mggSoft, Commented Apr 28, 2015 at 10:48

Nikos Paraskevopoulos · Accepted Answer · 2015-04-28 11:10:12Z

The addAdminForm is scoped within the form. So one option is to move the buttons within the form, or move the form element so that it wraps the buttons. I would prefer this since it is dead simple and most times doable.

If it is not possible for some reason, you can make a directive to export the $invalid flag of a form to a variable of the outer scope. A simple implementation would be:

app.directive('bindValidity', ['$parse', function($parse) {
    return {
        restrict: 'A',
        scope: false,
        controller: ['$scope', '$attrs', function($scope, $attrs) {
            var assign = $parse($attrs.bindValidity).assign;

            if (!angular.isFunction(assign)) {
                throw new Error('the expression of bindValidity is not settable: ' + $attrs.bindValidity);
            }

            this.setFormController = function(formCtrl) {
                if (!formCtrl) {
                    throw new Error('bindValidity requires one of <form> or ng-form');
                }
                $scope.$watch(
                    function () {
                        return formCtrl.$invalid;
                    },
                    function (newval) {
                        assign($scope, newval);
                    }
                );
            };
        }],
        require: ['?form', '?ngForm', 'bindValidity'],
        link: function (scope, elem, attrs, ctrls) {
            var formCtrl, bindValidity;
            formCtrl = ctrls[0] || ctrls[1];
            bindValidity = ctrls[2];
            bindValidity.setFormController(formCtrl);
        }
    };
}]);

Use it as:

<div class="modal-body">
    <form name="addAdminForm" bind-validity="some.variable">
        ...
    </form>
    <div class="modal-footer">
        <button ... ng-disabled="some.variable" ng-click="some.variable || ok()">Submit</button>

Collectives™ on Stack Overflow

angular FormController validation

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related