Question

我在我的项目中使用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个字段的验证？任何人都可以帮我理解这个吗？

Answer 1

您可能正在运行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;
  }]);
}]);

使用angularJS验证日期字段

1 个答案: