Validation does not work if it is in ng-include

Question

I have a simple page with field validation, something like this: employee.html and its field validation, but if I added the same code and named the same page using ng-include, validation does not work

without ng-include check works:

  <form name="form" class="form-horizontal" ng-validate="create(data)" novalidate> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="" class="col-xs-6 control-label">First Name:</label> <div class="col-xs-6"> <input name="first_name" type="text" class="form-control" ng-model="data.first_name" placeholder="First name" ng-required="true"> <div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div> </div> </div> </div> </div> </form> 

with ng-include validation does not work:

dashboard.html

 <div class="container"> .................... .................. <ng-include src="employee.html"></ng-include> </div> 

my question is: how can I do checks within ng-include?

Answer 1

yes, your $submitted does not work angular version 1.3 . if you need to show a message, if only the form is submitted, you can save the variable to determine if the form is submitted or not.

to do this

in the controller check function

 $scope.create = function(data) { $scope.formSubmitted = true; } 

the verification message uses formSubmitted instead of $submitted

 <div class="alert alert-danger" ng-show="formSubmitted && form.first_name.$error.required">E.. 

Plunker works here

---

But if you are using angular version 1.3 or later

angular enter $submitted in angular 1.3.x and may be your attempt with an older version of angular, updating angular will solve your problem.

Changes 1.3 here - please check

New Feature: Add New Submit Status to Forms

 <div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div> 

plunker works here

Answer 2

You can use bootstrap check in ui like this

 <form name="personalinformation"> <label for="fname"> First Name<span style="color:red" ng-show="personalinformation.firstname.$error.required">*</span></label> <input type="text" class="form-control" id="" placeholder="First Name" ng-model="PerInfo.FirstName" required name="firstname"> </form> 

and if you check with angular, you can create a validationFunction and ng-click pass the value of the text or other element in the controller. If the input type is false, then you fill in the value in ng-show = "true"

Answer 3

Use <ng-form></ng-form> instead of <form></form>