AngularJS client-side validation in directive

Question

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.

koolunix · Accepted Answer · 2017-02-27 23:09:57Z

1

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;
    }
});

answered Feb 27, 2017 at 23:09

koolunix

1,99516 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Irish · Accepted Answer · 2017-02-28 14:51:35Z

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.

Collectives™ on Stack Overflow

AngularJS client-side validation in directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related