1

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!

princjef
  • 135
  • 1
  • 1
  • 9
  • How do you load the form into the DOM? – sUP Aug 23 '13 at 17:43
  • ngInclude. I just switch the template file paths in and out to change the content of the modal – princjef Aug 23 '13 at 18:06
  • 1
    http://stackoverflow.com/questions/17474045/how-can-i-set-a-form-contained-inside-a-ng-include-to-be-prestine try the answer here, it might help – sUP Aug 23 '13 at 18:17

1 Answers1

1

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

Community
  • 1
  • 1
JoakimB
  • 1,196
  • 2
  • 13
  • 19