Question

我有两个字段都接受数字。一个人必须始终高于另一个人。例如，您可以为age添加一个字段，然后为older sibling age添加一个字段，根据第一个字段，该字段当然必须更大。

我的字段是这样的：

<input type="number" ng-model="age" required> 

<input type="number" ng-model="olderSiblingAge" required>

我尝试在min="age"输入中使用olderSibling，但没有运气，仍然可以低于它。

Answer 1

您必须按照number input文档中有关AngularJS的规定插入如下所示的值：min="{{vm.age}}"。

angular
  .module('app', [])
  .controller('ctrl', function() {
    var vm = this;
    vm.age = 1;
    vm.olderSiblingAge = 2;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl as vm">
  <label> Age </label> <br />
  <input type="number" ng-model="vm.age" required ng-change="vm.olderSiblingAge = vm.age">

  <br /><br />

  <label> Older sibling age </label> <br />
  <input type="number" ng-model="vm.olderSiblingAge" required min="{{vm.age}}">
</div>

注意：我使用 controller-as 语法。当然，您可以使用$scope这样的min="{{age}}"表示法来使用它。{/ 1}}

Answer 2

尝试使用此代码

<input type="number" ng-model="age" required> 

<input type="number" ng-change="olderSiblingAge = (olderSiblingAge < age)?age+1:olderSiblingAge" ng-model="olderSiblingAge" required>

Answer 3

要获得预期结果，请使用以下选项使用ng-blur来比较输入的值

代码示例https://codepen.io/nagasai/pen/XEJpYa?editors=1010

<强> HTML：

<div ng-app="test" ng-controller="testCtrl">
Age <input type="number" ng-model="age" required> 
Sibling Age <input type="number" ng-model="olderSiblingAge" required ng-blur="check()">{{olderSiblingAge}}

</div>

<强> JS：

var app = angular.module('test',[]);

app.controller('testCtrl',function($scope){
    $scope.check = function(){
      if($scope.age  > $scope.olderSiblingAge){
         $scope.olderSiblingAge = null
        alert("older sibling age should be greater than age")
      }
    }
})

HTML输入验证（Angular）依赖于其他字段

3 个答案: