CODEWITHSUNDEEP
javascriptformsvalidationangularjs
princjef
princjef

Reputation: 135

AngularJS validation of asynchronously loaded form

I am building an AngularJS application that includes modal windows which contain forms and are loaded into the DOM asynchronously (when the appropriate button is clicked). The forms work fine, but I cannot properly check if they are valid. Here's an example:

HTML

<div ng-app="myapp" ng-controller="MyCtrl">
    <form novalidate name="myform" ng-submit="submitForm(myform)">
        <input type="text" required ng-model="myname" />
    </form>
</div>

JavaScript

var app = angular.module('myapp', []);
app.controller("MyCtrl", function($scope) {
    $scope.submitForm(form) {
        if(form.$valid) {
            // Do http stuff here
        }
    };
});

If this form is loaded asynchronously, the form variable has value NaN and form.$valid is undefined. However, if I load it with the rest of the page, it works fine. Does anyone know how to force AngularJS to populate the scope variable for the form? Thanks!

Upvotes: 1

Views: 1008

Answers (1)

JoakimB
JoakimB

Reputation: 1206

When you include a form using ng-include a childScope is created. The parent and the childScope cant access eachothers scopes. Therefore the .$valid comes up empty.

I had a similiar issue the other day and got a working solution that suited me in this thread:

AngularJS $setValidity on childScope form

Upvotes: 1

Related Questions