Question

我有一个简单的页面来验证字段，如下所示： 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中进行验证？

Answer 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

但如果您使用的是角1.3或更高版本

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

这是Changes of the 1.3 - 请查看

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

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

这是工作plunker

Answer 2

您可以在ui中使用bootstrap验证

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

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

Answer 3

使用<ng-form></ng-form>代替<form></form>

如果在ng-include中验证不起作用

3 个答案: