CODEWITHSUNDEEP
angularjs
Alex Polkhovsky
Alex Polkhovsky

Reputation: 3360

$setValidity on a field doesn't invalidate the form

I have a simple form with one field (but with all the ng stuff, it's becoming quite complicated).

<form class="smart-form" name="newAdminForm" ng-submit="addAdminUser()" novalidate="novalidate">
                <fieldset>
                    <legend>Add Admin User</legend>
                    <section>
                        <label class="input"
                               ng-class="{ 'state-error' : ((newAdminForm.email.$invalid && !newAdminForm.email.$pristine) || !newAdminForm.email.$error.duplicate) && submitted }">
                            <i class="fa fa-envelope-o icon-append"></i>
                            <input type="email" ng-model="newAdminEmail" name="email"
                                   required="required"
                                   ng-class="{ 'invalid' : newAdminForm.email.$invalid && !newAdminForm.email.$pristine }">
                        </label>
                        <em class="invalid" for="email" ng-show="!newAdminForm.email.$valid && submitted">
                            Please enter valid email address.
                        </em>
                        <em class="invalid" for="email" ng-show="!newAdminForm.email.$error.duplicate && submitted">
                            User with this email is already an admin for this company profile.
                        </em>
                        <div class="note">
                            <i class="fa-fw fa fa-info"></i>
                            Enter the email address of a person you would like to add as
                            an admin of your business profile. We will notify them with a message and allow them to set
                            their password.
                        </div>
                    </section>
                </fieldset>
                <footer>
                    <button type="submit" class="btn btn-primary">Add Admin</button>
                </footer>
            </form>

ng-submit kicks off this function:

$scope.addAdminUser = function(){
        $scope.submitted=true;
        if($filter('filter')($scope.admins, {'email' : $scope.newAdminForm.email}).length > 0){
            $scope.newAdminForm.email.$setValidity("duplicate", false);
        }

        if($scope.newAdminForm.$valid){
            // we'll add the user
            console.log('form still valid?');
        }
    };

The validity of email is being set to false, the appropriate error message is being displayed on the screen. But the form itself is still valid! What am I missing?

Upvotes: 2

Views: 5180

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

The reason is your $setValidity is not called. You're passing in wrong parameter to filter. Try:

if($filter('filter')($scope.admins, {'email' : $scope.newAdminForm.email.$modelValue}).length > 0){
        $scope.newAdminForm.email.$setValidity("duplicate", false);
}

Notice the $scope.newAdminForm.email.$modelValue

DEMO

Or use your model property newAdminEmail directly: 

if($filter('filter')($scope.admins, {'email' : $scope.newAdminEmail}).length > 0){
        $scope.newAdminForm.email.$setValidity("duplicate", false);
}

DEMO

Upvotes: 2

Related Questions