Question

我的网站上有两个基本输入字段（一个输入日期和一个输入数字）：

- 对于日期输入，我可以在用户从日历中选择日期时设置最小值和最大值，但是当手动写入日期时，不会遵守最小值和最大值。我想知道如何解决这个问题，所以当用户输入日期时，最小值和最大值都会被尊重。

- 对于数字输入，它只需要接受正值。另外，如果输入的值为0，我想显示错误信息或在输入字段中放置一个红框。

Answer 1

对于第一个问题，你可以在ng-change上放一个函数并传递给它模型并在你的控制器中验证其他方式你可以写一个自定义验证器指令，但我怀疑有真正的需要为此。
```
    <input type="text" 
      datepicker-popup="dd-MMMM-yyyy" ng-model="myDate" 
      ng-change="checkDate(myDate)/>
```

和内部控制器

$scope.checkDate(date) {
  if(date < new Date()) {
    $scope.dateError = true
  }
}

并在您的视图中

<p ng-show="$scope.dateError">
  Please enter date bigger then today
</p>

有一个min属性，允许您设置一个最小可接受值，在它的情况下它应该是1

要显示错误，您可以使用类似的内容

<p ng-show="yourFormName.fieldName.$invalid">
  Please enter something else
</p>

希望这有帮助

Answer 2

检查以下代码..

<form name="myForm" ng-controller="ExampleController">
  <label>Number:
    <input type="number" name="input" ng-model="example.value"
           min="0" max="99" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>

<label>Email Address:
    <input type="email" name="txtemail" ng-model="example.email"
            required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.txtemail.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.txtemail.$error.email">
      Not valid number!</span>
  </div>
 </form>

Answer 3

请在下面找到第二个问题的答案。

对于数字输入，它只需要接受正值。此外，如果输入的值为0，我希望显示错误消息或在输入字段中添加红框。

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.showError = function(data){
$scope.isError=false;
if(data==0)
$scope.isError=true;
}
  
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" min="0" ng-change="showError(inputValue)" ng-model="inputValue"></input>
<p ng-show="isError" style="color:red">Error msg - you typed Zero</p>
</body>
</html>

＆＃13;

AngularJS - 日期输入和数字输入验证

3 个答案: