How to use Angular form validation for other elements like div?

Question

I am using angular form validation using the code below

<form ng-app="" ng-controller="validateCtrl" name="myForm" novalidate> <p>Username:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span> </span> </p> </form> 

But if I want to use like this:

 <div ng-app="" ng-controller="validateCtrl" name="myForm" novalidate> <p>Username:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span> </span> </p> </div> 

But that does not work. Is there any way to make this work? without using any other libraries.

jsfiddle: link

Answer 1

You can use the ngForm directive ( here ) to enable the services $pristine , $dirty , $valid , $invalid within this:

just define it like this:

 <div ng-app="" ng-controller="validateCtrl" name="myForm" novalidate ng-form> 

Here is an example:

http://jsfiddle.net/s5efjzue/

Answer 2

Why not wrap the form in a div? This can provide what you are looking for.

 <div ng-app="" ng-controller="validateCtrl"> <form name="myForm" novalidate> <p>Username:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span> </span> </p> </form> </div>