AngularJS dynamic form field with adding required attribute

Question

I am trying to validate some form fields which are given to me from a backend. I want to be able to add the required attribute if that field name needs that attribute. Here is what I have html side:

      <div class="form-group">

        <!-- ************** ADDITIONAL DYNAMIC FIELDS ******** -->

             <div ng-repeat="field in assetFields" ng-cloak>
                  <div class="col-sm-6">
                     <input type="@{{field.element_type}}" name="@{{field.property}}" class="form-control input-lg" value="" id="@{{field.property}}">
                </div>
      </div>

Here is Angularjs side of it:

$http.get('/getAssetFeilds/'+$scope.assetType).success(function(data)
            {
                console.log(data);
                $scope.assetFields = data;

                 //loop through the array of json objects
                angular.forEach(data, function(input, key){
                    //get the type of element
                    if(input.element_type == 'text'){
                        //loop through input validations 
                        angular.forEach(input.validations, function(value, key){
                            //check if this input type field is required
                            if(value == 'required'){
                                console.log("#"+input.property);
                                //find the element id value and add required attribute
                                angular.element("#"+input.property).attr('required', 'required');
                            }

                        });
                    }
                });

            });

However,its not adding the attribute when I do inspect element. what could be the reason for this not working? which I thought would have worked.

machinehead115 · Accepted Answer · 2016-11-23 20:06:58Z

1

What is the purpose of the '@' in the attributes?

id="@{{field.property}}"

Currently the id being set for the elements has the '@' preceding the id name however you are looking for "#" + input.property and adding the '@' symbol there, "#@" + input.property will give you an invalid error.

You will also need to wrap the adding of the required attribute in a $timeout to make sure the DOM element is rendered first.

$timeout(function() {
    angular.element("#" + input.property).attr('required', 'required');
});

Here is a plnk of it working.

answered Nov 23, 2016 at 20:06

machinehead115

1,65710 silver badges20 bronze badges

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

2 Comments

ballerz Over a year ago

The purpose of the '@' is that i am using laravel php framework which uses the '{{}}' for its blade template.

machinehead115 Over a year ago

Ok, then I'm assuming that you have the @{{ set up using the $interpolateProvider to use that for the Angular bindings, correct? I updated the plnk to reflect that assuming that is what you meant. Try wrapping the adding of the required attribute in a $timeout in your code and see if that works.

Collectives™ on Stack Overflow

AngularJS dynamic form field with adding required attribute

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related