Validation does not work if its in ng-include

Question

I have a simple page with validating the field, something like this: employee.html and its validating the field but if I have added the same code and called the same page using ng-include the validating is not working

without ng-include validate 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 validate does not works:

dashboard.html

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

my question is: how can I make the validation works within ng-include?

I think it's related to the fact that `ng-include` creates it's own scope, but I need more context(fiddle would be great). — Rasalom, Dec 15 '14 at 16:36
Think it's scope, as @Rasalom said. The include has a different scope from that `create(application)` and then it is not called and the rest won't work. Don't you have errors in console? — Filipe Roxo, Dec 15 '14 at 16:51
ng-include create a new scope but form is in the scope so ...may be the problem is manage the data but with the validation there is no troubles — Whisher, Dec 15 '14 at 16:52
seems like ur `form.$submitted` is not working please double check it, ng-include create a child scope , but ur ng-include should have access to the parent scope. i think the problem is in `form.$submitted` — Kalhan.Toress, Dec 15 '14 at 16:54
@KalhanoToressPamuditha: you are right I think so too `form.$submitted` is not working how do i debug or what do i need to fix? — Nick Kahn, Dec 15 '14 at 16:55
@AbuHamzah I've updated the gist with a simple directive you can also get the data and the validation works ! — Whisher, Dec 15 '14 at 17:08

Kalhan.Toress · Answer 1 · 2014-12-15T17:40:21.510

0

yes your $submitted is not working angular version 1.3. if you need to show the message if only form is submit then you can keep a variable to detect whether the form is submitted or not.

to do that

in controller test function

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

in validation message use formSubmitted instead of $submitted

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

here is the working Plunker

But if you are using angular 1.3 or later version

angular introduce a $submitted in angular 1.3.x and may be your trying with a older angular version, upgrading angular will solve your problem.

here is the Changes of the 1.3 - please check the

new feature: Add new $submitted state to forms

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

here is the working plunker

edited Dec 15 '14 at 17:40

answered Dec 15 '14 at 17:04

Kalhan.Toress

21,683
8
68
92

@AbuHamzah I updated my answer please have a look :) – Kalhan.Toress Dec 15 '14 at 17:15
I'm using `AngularJS v1.2.23`... will take a look more detail – Nick Kahn Dec 15 '14 at 17:17
yes if you are working `1.2 version` then you have to do something like i suggest in first part, or if you can upgrade the angular version then you can use `$submitted` – Kalhan.Toress Dec 15 '14 at 17:18

score 0 · Answer 2 · answered Sep 22 '15 at 04:47

You can use bootstrap validation in ui like that

<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 validation by angular you can create validationFunction and ng-click pass the value of text or other element in controller.If input type is false then you cal fill value in ng-show="true"

score 0 · Answer 3 · answered Sep 24 '17 at 14:07

0

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

answered Sep 24 '17 at 14:07

Kenath

600
5
13

Validation does not work if its in ng-include

3 Answers3