正在验证日期字段's使用angularJS

Validating the date field's using angularJS

本文关键字：使用 angularJS 验证 日期 字段      更新时间：2023-09-26

我在项目中使用angularJS进行验证，我知道要验证正常字段。现在，通过传入name属性的参数，我得到了日期字段。在某些情况下，用户可以单击"添加日期"按钮添加更多日期。因此，在本例中，我通过传递带有name属性的参数来编写代码。因此，我无法获得要验证的名称字段。

即使用户添加了更多的日期字段来输入，我也希望验证所有的日期字段。

这是我正在使用的代码，

 <div class="col-md-12 col-sm-12 col-xs-12 table-responsive">
 <table class="table table-striped table-hover">
    <tr ng-repeat="dates in hall.hallDates">
       <td>
        <div class="col-md-6 col-sm-6 p-0 p-t-10">
            Select Date<span style="color: red">*</span>
        </div>
        <div class="col-md-6 col-sm-6 p-0 p-t-10">
            <input type="text" ng-model="dates.hallDate"
                name="hallDate{{ $index }}" class="form-control"
                placeholder="DD-MM-YYYY" mydatepicker readonly="true" 
                ng-class="{ validateFields: submitted && createHallForm.date.$invalid }" 
                required>
                <div ng-show="submitted && createHallForm.date.$invalid">
                    <span class="validateFields" ng-show="createHallForm.date.$error.required" >Please enter the date</span>
                </div>  
</div>

如何获取带参数的名称字段以对n个字段进行验证？有人能帮我知道这件事吗？

您可能正在运行Angular 1.2或更低版本。在这些版本中，不能动态设置元素的name属性。您可以通过查看渲染的DOM来确认这一点，并且仍然可以看到渲染后的name="hallDate{{ $index }}"。

请参阅此处的相关GitHub问题：https://github.com/angular/angular.js/issues/1404

解决方案1升级至1.3.x

解决方案2使用上面提到的GitHub问题中发布的以下解决方法。

// Your app module
angular.module('app', [])
// Workaround for bug #1404
// https://github.com/angular/angular.js/issues/1404
// Source: http://plnkr.co/edit/hSMzWC?p=preview
.config(['$provide', function($provide) {
  $provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
    var ngModel = $delegate[0], controller = ngModel.controller;
    ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
      var $interpolate = $injector.get('$interpolate');
      attrs.$set('name', $interpolate(attrs.name || '')(scope));
      $injector.invoke(controller, this, {
        '$scope': scope,
        '$element': element,
        '$attrs': attrs
      });
    }];
    return $delegate;
  }]);
  $provide.decorator('formDirective', ['$delegate', function($delegate) {
    var form = $delegate[0], controller = form.controller;
    form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
      var $interpolate = $injector.get('$interpolate');
      attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope));
      $injector.invoke(controller, this, {
        '$scope': scope,
        '$element': element,
        '$attrs': attrs
      });
    }];
    return $delegate;
  }]);
}]);
相关文章：