AngularJS - 仅在一个字段大于另一个字段时验证答案

【问题标题】：AngularJS - Validate only if one field greater than the otherAngularJS - 仅在一个字段大于另一个字段时验证
【发布时间】：2018-09-20 08:19:00
【问题描述】：

我有两个输入字段，一个是From Year，另一个是To Year。只有当To Year 大于From Year 值时，我才必须验证表单的提交按钮。

这是年份的代码：

<div class="col-md-6 no-pad-right">
 <label>Tenure From Year</label>
 <input name="tenure_from_year" ng-model="joinFormData.tenureFromYear" name="tenure_from_year" class="form-control" placeholder="2014" type="text" ng-required="joinFormData.memberType == 'alumni'" ng-maxlength="4" ng-pattern="/(?:(?:19|20)[0-9]{2})/">
 <span ng-show="joinForm.tenure_from_year.$error.pattern || joinForm.tenure_from_year.$error.maxlength">
    <span class="red-color">Enter correct year!</span>
 </span>
</div>

这是年份的代码：

<div class="col-md-6 no-pad-right">
  <label>Tenure To Year</label>
 <input name="tenure_to_year" ng-model="joinFormData.tenureToYear" name="tenure_to_year" class="form-control" placeholder="2014" type="text" ng-required="joinFormData.memberType == 'alumni'" ng-maxlength="4" ng-pattern="/(?:(?:19|20)[0-9]{2})/">
 <span ng-show="joinForm.tenure_to_year.$error.pattern || joinForm.tenure_to_year.$error.maxlength">
  <span class="red-color">Enter correct year! </span>
 </span>
</div>

如果表单无效，提交按钮将被禁用

<button type="submit" class="btn btn-default btn-save-custom"  ng-click="joinLeap()" ng-disabled="joinForm.$invalid" >Submit</button>

那么，我如何验证 from 和 to 年份字段，以便在年份有效时启用提交按钮。

【问题讨论】：

这不起作用。我添加了一个函数来检查 to 是否大于 from 并将有效性设置为 true。但它没有工作@tanmay

标签： angularjs forms validation input-field

【解决方案1】：

你可以使用手表。

$scope.validate = false;
$scope.$watch('joinFormData.tenureFromYear', function (newVal, oldVal) {
  if (newVal > oldVal) {
     $scope.validate = true;
  } else {
     $scope.validate = false;
  }
});

【讨论】：

【解决方案2】：

比较你在ng-click中提到的方法joinLeap()中的ng-model字段

$scope.dateValidation = false;

$scope.joinLeap = function (joinFormData) {
   if (joinFormData.tenureToYear > joinFormData.tenureFromYear) {
      $scope.dateValidation = true;
   } else {
      $scope.dateValidation = false;
   }
}

通过ng-click方法传递参数

<button type="submit" class="btn btn-default btn-save-custom"  ng-click="joinLeap(joinFormData)" ng-disabled="joinForm.$invalid || !dateValidation" >Submit</button>

我想这会对你有所帮助。根据要求设置 dateValidation 的真假值。

【讨论】：