CODEWITHSUNDEEP
angularjsvalidationangularjs-directive
Irish
Irish

Reputation: 1517

AngularJS client-side validation in directive

I'm using a directive to encapsulate a partial form. There's an enclosing form which passes the model values into the directive. Here's the basic layout:

<form name="userForm" class="form-horizontal" ng-submit="vm.onSubmitForm(userForm.$valid)" novalidate>

<fieldset>
    <legend>Account</legend>

    <div class="form-group" control-validator="" validator-condition="vm.hasTriedToSubmit">
        <label class="col-md-2 control-label">Email (username):</label>
        <div class="col-md-10">
            <input class="form-control" type="email"
                   id="email" name="email"
                   placeholder="Email"
                   required
                   ng-model="vm.formData.email">
            <control-validator-message>Email is required.</control-validator-message>
        </div>
    </div>

    <!-- some other fields -->

    <div ng-if="vm.isUserChecked()">
        <!-- directive which is rendered conditionally --> 
        <dt-user user="vm.user" display-name-fields="false"></dt-user>
    </div>

</fieldset>

So the idea is that if the user directive is rendered, some of its fields will be required. This actually works as it is, but I don't get the validation message displayed, nor do I get the error CSS applied to the required fields. I am stopped from submitting the form if a required directive field isn't present, and the fields in the regular parts of the form show the messages and error CSS, but I'm not having luck with those in the directive. Basically I need a way to signal the enclosing form from the directive to trigger the validation.

Upvotes: 0

Views: 72

Answers (2)

Irish
Irish

Reputation: 1517

The problem was a mistake in scope. The validator-condition "vm.hasTriedToSubmit" was part of the outer controller, not the directive's controller. I modified my scope interface to include this value, added it to the scope initializer in the directive, and passed it in where the directive is used.

The interface:

export interface IUserScope extends ng.IScope {
user: UserViewModel;
hasTriedToSubmit: boolean;
displayNameFields: boolean; }

The directive:

var userDirectiveArray = [
    (): ng.IDirective => ({
        restrict: "E",
        replace: true,
        scope: {
            user: '=',
            hasTriedToSubmit: '=',
            displayNameFields: '='
        },
        templateUrl: "/path/user.directive.tpl.html",
        controllerAs: 'vm',
        controller: UserDirectiveController
    })
];

Using the directive:

<dt-user user="vm.formData" has-tried-to-submit="vm.hasTriedToSubmit" display-name-fields="true"></dt-user>

Some checks happen while a submission is attempted, which is where the "vm.hasTriedToSubmit" value is used. It was being evaluated on the outer controller, but in the directive it simply defaulted to "false", so my error feedback wasn't displayed.

Upvotes: 0

koolunix
koolunix

Reputation: 1995

I think the issue you have is the not the validation, but when to show the errors from the validation, correct? Here is a small example of how I did this

<div ng-controller="subCtrl">
    <form name="groupEdit" ng-submit="groupEditSubmit()">
        <input required
            name="firstName"
            ng-class="{ 'highlight-error' : groupEdit.showError &&
                groupEdit.firstName.$invalid }" />
        <button ng-click="groupEditSubmit()">group edit submit</button>
    </form>
</div>


.controller('subCtrl',function($scope) {
    $scope.groupEditSubmit = function() {
        $scope.groupEdit.showError = $scope.groupEdit.$invalid;
    }
});

Upvotes: 1

Related Questions