Angularjs +如何在指令中获取先前的输入字段值

Posted 2023-02-19

【中文标题】Angularjs +如何在指令中获取先前的输入字段值

【英文标题】：Angularjs+how to take a previous input field value in directive

【发布时间】：2014-03-20 23:58:56

【问题描述】：

我有一个表单，其中有 2 个日期字段，来自 date 和 todate。我正在编写一个指令来比较这个日期字段。

如何获取提交的起始日期。我在toDate 的onBlur 上调用我的自定义指令，现在需要获取起始日期。表单设计如下。

<div class="row">
  <div class="col-xs-6 col-sm-6 col-6">
    <label>From date</label>
    <input type="text" id="eduFromDate" name="eduFromDate" class="form-control" 
           ng-model="education.fromDate" ui-date/>
  </div>
  <div class="col-xs-6 col-sm-6 col-6">
    <label>To date</label>
    <input type="text" name="edutoDate" class="form-control" id="edutoDate" 
           ng-model="education.toDate" ui-date before-date/>
    <span class="error input-icon fui-alert" 
          ng-show="historyForm.edutoDate.$error.beforeDate"></span>
  </div>
</div>

【问题讨论】：

也许这个plunker 会有所帮助。您要计算日期范围吗？

Custom form validation directive to compare two fields的可能重复

@stewie 你的链接对我制定指令有很大帮助。

@Stewie 感谢您的链接，它对我帮助很大。我正在比较 2 个日期，比如开始日期和结束日期。在我的一种形式中克隆了这些元素。所以我怎么能识别每个元素都不同。下面给出的是我的 html 代码和指令。

【参考方案1】：

我的指令代码如下。

directives.directive('beforeDate', [
    function() 

        var link = function($scope, $element, $attrs, ctrl) 

            var validate = function(viewValue) 
                var comparisonModel = $attrs.beforeDate;
                console.log(new Date(comparisonModel));
                if(!viewValue || !comparisonModel)
                    ctrl.$setValidity('beforeDate', true);
                
                ctrl.$setValidity('beforeDate', new Date(viewValue) > new Date(comparisonModel) );
                return viewValue;
            ;

            ctrl.$parsers.unshift(validate);
            ctrl.$formatters.push(validate);

            $attrs.$observe('beforeDate', function(comparisonModel)
                console.log('comparisonModel '+comparisonModel)
                return validate(ctrl.$viewValue);
            );

        ;

        return 
            require: 'ngModel',
            link: link
        ;

    
]);

按照我给出的形式

<span ng-repeat="education in userEducation">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-6">
      <label>From date</label>
      <input type="text" id="eduFromDate" name="eduFromDate" class="form-control" ng-model="education.fromDate" ui-date>
    </div>
    <div class="col-xs-6 col-sm-6 col-6">
      <label>To date</label>
      <div class="form-group has-success">
        <input type="text" name="edutoDate" class="form-control" id="edutoDate" ng-model="education.toDate" ui-date before-date="eduFromDate">
        <span class="error input-icon fui-alert" ng-show="historyForm.edutoDate.$error.beforeDate"></span>
      </div>
    </div>
  </div>
</span>