AngularJS dynamic required attribute in directive and form validation

Question

I have a directive that receives whether an element should be required or not from a REST api. Right now, I can't seem to get the form to invalidate when an attribute is set to required.

So, in essence I'm able to dynamically add the 'required' attribute from the directive below, but it doesn't invalidate the form. Looking through chrome I see that, even though the required attribute exists, a required entry in the $error array doesn't exist.

app.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }

            if(attrs.requireiftrue==="true"){
                console.log('should require');
                el.attr('required', true);
                $compile(el.contents())(scope);
            }
            else{
                console.log('should not require');   
            }
        }
    };
});

Here's a jsfiddle to illustrate the problem. And, here's sample JSON returned from my rest API

{
    race: false,
    martialStatus: true,
}

EDIT: While the accepted answer got me up and running, I still had a good bit of finagling to do.

Namely: 1. Resolving a deferred promise to ensure that my form actually receives the required fields to validate 2. observing my 'requireiftrue' attribute

My solution

module config:

function config($stateProvider) {
    $stateProvider

    .state('testState', {
        url: '/test/form',
        controller: 'TestCtrl',
        templateUrl: 'test/form/testForm.tpl.html',
        resolve: {
            formDefaultService: function getFormDefaults($q, dataservice) {
                // Set up a promise to return
                var deferred = $q.defer();
                var myData = dataservice.getFormDefaults();
                deferred.resolve(myData);

                return deferred.promise;
                //return 
            }
        },

        data: {
            pageTitle: 'Test Info'
        }
    });
}

And, finally the directive / HTML that receives api data:

Directive:

.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }
            attrs.$observe('requireiftrue', function(value){ 
                if(value==="true"){
                    el.attr('required', true);
                    el.removeAttr('requireiftrue');
                    $compile(el[0])(scope);
                }
            });
        }
    };
});

HTML:

<input max="40"
requireiftrue={{defaults.validation.name}}
validNumber
id="name"
name="name"
type="text"
ng-model="test.name"
class="form-control">

Unfortunately, I haven't get it to work. When the page loads the rest call isn't finished, and doesn't evaluate the return. — olingern
– olingern, Commented Jan 29, 2015 at 5:19

Aviv Shaked · Accepted Answer · 2015-01-29 05:36:26Z

You had two issues: The first is el.contents() returned an empty array. so The first thing you should do is change it to el[0]. But had el.contents() worked you would hav had a much more serious problem. You would have been trying to compile a directive that has itself as a directive which would lead to an infinite loop (well until the browser crashed any way). So here is the revised code:

var app = angular.module('form-example', []);

app.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }

            if(attrs.requireiftrue==="true"){
                console.log('should require');
                el.attr('required', true);
                el.removeAttr('requireiftrue');
                $compile(el[0])(scope);
            }
            else{
                console.log('should not require');   
            }
        }
    };
});

I should note however that now this directive is a one-off. If the model will change, the directive will not be on the element any longer to deal with it.

isherwood · Accepted Answer · 2017-05-12 15:51:41Z

4

Instead of using a directive, use ng-init to initialize requireiftrue. and assign this value to ng-required like ng-required="requireiftrue" as shown below. As you said you are getting the data from rest api, you can initialize requireiftrue with the value you are getting from api, instead of true or false as shown in example below.

Hope this helps you.

Updated fiddle http://jsfiddle.net/zsrfe513/3/

<form ng-app="form-example" name='fo' class="row form-horizontal" novalidate>
<div class="control-group" ng-form="testReq">
    <h3>Form invalid: {{testReq.$invalid}}</h3>
 <label class="control-label" for="inputEmail">Email</label>
 <div class="controls" ng-init='requireiftrue = true'>
   <input id="inputEmail" placeholder="Email" ng-model="email"  name='ip' ng-required='requireiftrue'>

    <span ng-show="testReq.ip.$dirty && testReq.ip.$error.required">
        Required.
    </span>
   </div>
 </div>
</form>

edited May 12, 2017 at 15:51

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jan 29, 2015 at 5:25

Rajeshwar

2,5674 gold badges34 silver badges50 bronze badges

1 Comment

Rajeshwar Over a year ago

Dont just add 'required' attribute. it always behaves like 'required=true'. If you do so, there wont be any difference between 'requireiftrue= true' and 'requireiftrue=false' which you are getting from api. It will always invalidate irrespective of 'requireiftrue=true' or 'requireiftrue=false'.

Michael Coleman · Accepted Answer · 2015-01-29 05:17:45Z

1

Try:

1. adding the required directive to the input you want to apply validation to

<input id="inputEmail" class="requireiftrue" placeholder="Email" 
    ng-model="email" requireiftrue="true" required>

2 Defining the directive as type class and adding the directive class to the HTML input field

JS

app.directive('requireiftrue', function ($compile) {
   return {
    restrict: 'C',
    require: '?ngModel',
    .....

HTML

<input id="inputEmail" class="requireiftrue" placeholder="Email" ng-model="email" requireiftrue="true" required>

here is a update of your fiddle - http://jsfiddle.net/4fb6wg30/

edited Jan 29, 2015 at 5:17

answered Jan 29, 2015 at 5:12

Michael Coleman

3,4183 gold badges21 silver badges19 bronze badges

1 Comment

olingern Over a year ago

Hmmm, the reason I wanted the 'requireiftrue' directive was to conditionally include the 'required' attribute on the input

twernt · Accepted Answer · 2016-01-29 14:48:35Z

0

You just need to add the "required" attribute to the input.

<input max="40"
requireiftrue={{defaults.validation.name}}
validNumber
id="name"
name="name"
type="text"
ng-model="test.name"
class="form-control"
required="required">

edited Jan 29, 2016 at 14:48

twernt

20.6k5 gold badges35 silver badges41 bronze badges

answered Jan 29, 2015 at 5:21

Support JDWebapps

193 bronze badges

Comments

Richard Torcato · Accepted Answer · 2016-12-23 22:59:19Z

0

I used <input ng-required="true"> worked fine for my angular validation component.

If your using the new angular component make sure to pass in required: "@" instead of required: "="

scope: {
      required: '@'
    }

I also took this further and required integer and min/max validation the same way.

answered Dec 23, 2016 at 22:59

Richard Torcato

2,84028 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS dynamic required attribute in directive and form validation

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related