AngularJS form validation while adding dynamic elements

Question

I have a form with AngularJS validation.
The problem is that I add input elements to this form using Jquery and AngularJS doesn't add those elements into the form's validation..
Here's an example: http://jsfiddle.net/ULEsy/

var input = $compile($('<input type="text" ng-model="textinput" required />'))($scope);
$("#someform").append(input);

In the example, even though the input field is not valid (empty - can be seen by the red border), the entire form is valid. Any help?

I don't have much experience with angular, but this might be a start. — Peter
– Peter, Commented Dec 19, 2013 at 13:34
I already saw this thread.. The difference is that there Angular is the one that is adding the elements to the form.. And in my case it is jquery.. — Ephi Gabay
– Ephi Gabay, Commented Dec 19, 2013 at 13:41

Community · Accepted Answer · 2017-05-23 12:09:20Z

2

@Ephi and I found a solution for this problem. Apparently, you need to first append the element to the DOM, and only then use $compile. Also, the new element needs a name.

See here

angular.module("app", []).controller('someController', function($scope, $compile) {   
    $scope.add = function() {
        var input = $('<input type="text" ng-model="textinput" name="x" required />');
        $("#someform4").append(input);    
        $compile(input)($scope);
    }
});

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Dec 19, 2013 at 14:39

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

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

1 Comment

Ephi Gabay Over a year ago

FYI if you want to remove an element you should remove it and then compile its parent..

Collectives™ on Stack Overflow

AngularJS form validation while adding dynamic elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related