I am using angular form validation using the below code

<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 this is not working. Is there is any way to do this work? without using any other libraries.

jsfiddle:link

I am using angular form validation using the below code

<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 this is not working. Is there is any way to do this work? without using any other libraries.

jsfiddle:link

• javascript
• angularjs
• validation
• angularjs-directive

2 Answers 2

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

just define it this way:

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

Here an example:

http://jsfiddle/s5efjzue/

Why not wrap the form in a div? This might achieve what you're 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>