如果它在 ng-include 中，则验证不起作用答案

【问题标题】：Validation does not work if its in ng-include如果它在 ng-include 中，则验证不起作用
【发布时间】：2015-02-13 19:32:06
【问题描述】：

我有一个验证字段的简单页面，如下所示： employee.html 及其验证字段，但如果我添加了相同的代码并使用 ng-include 调用相同的页面，则验证不起作用

without ng-include 验证工作：

 <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 验证不起作用：

dashboard.html

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

我的问题是：如何在 ng-include 中进行验证？

【问题讨论】：

我认为这与ng-include 创建它自己的范围有关，但我需要更多上下文（小提琴会很棒）。
验证是唯一不起作用的吗？
是验证唯一不起作用的东西
我试过了，效果很好
删除form.$submitted并检查其是否正常工作

标签： angularjs angularjs-ng-include

【解决方案1】：

是的，您的 $submitted 无法正常工作 angular version 1.3。如果您需要在仅提交表单的情况下显示消息，那么您可以保留一个变量来检测表单是否已提交。

这样做

在控制器测试功能中

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

在验证消息中使用formSubmitted 而不是$submitted

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

这是工作的Plunker

但如果你使用的是 Angular 1.3 或更高版本

angular 在 angular 1.3.x 中引入了 $submitted，可能是您尝试使用较旧的 angular 版本，升级 angular 将解决您的问题。

这里是Changes of the 1.3 - 请查看

新功能：向表单添加新的 $submitted 状态

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

这是工作的plunker

【讨论】：

@AbuHamzah 我更新了我的答案，请看一下:)
我正在使用AngularJS v1.2.23... 会看看更多细节
是的，如果您正在工作 1.2 version，那么您必须执行我在第一部分中建议的操作，或者如果您可以升级 Angular 版本，那么您可以使用 $submitted

【解决方案2】：

你可以像这样在 ui 中使用引导验证

<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>

如果你通过角度验证，你可以创建validationFunction并ng-click传递控制器中文本或其他元素的值。如果输入类型为false，那么你可以在ng-show="true"中填充值

【讨论】：

【解决方案3】：

使用<ng-form></ng-form> 而不是<form></form>

【讨论】：