Question

我是AngularJS的新手，我正在尝试验证日期字段。这也是我提出的第一个问题。我在网上看过例子，但似乎没有一个对我有用，所以我的问题是，我可以在ng-show中验证，如下所示。我有一个日期字段，格式为MM / dd / yyyy，我不希望myDateName字段设置为当前日期。我觉得这样的事情会起作用 - 我接近吗？

input type="text" ng-model="something.something" name="myDateName" ng-required="true" 

span class="error" ng-show="{{myDateName = new Date()}}">Can't be today's date<(close span)

我想在myDateName等于当前日期时显示错误消息。我也试过了ng-show="angular.equals(myDateName, new Date())"但也没用，我很沮丧。

如果这是一个重复的问题，我提前道歉，我认为不是，但为了以防万一，你的时间很宝贵，我很感激你的建议。

Answer 1

您无法在角度表达式中使用new关键字。这条规则背后的基本原理是业务逻辑属于控制器而不是视图。这是名为separation of concerns的软件设计主体的一部分。视图的主要目的是显示数据。

禁止具有或促进副作用的JavaScript表达式，包括：


赋值（=，+ =， - =，...）

新

链接表达式;或者，

递增和递减运算符（++和 - ）


模板表达式不应更改目标属性值以外的任何应用程序状态。

此规则对Angular的“单向数据流”策略至关重要。我们永远不应该担心读取组件值可能更改其他一些显示值。在整个单一渲染过程中，视图应该是稳定的。

我的建议是创建一个单独的函数来确定新的日期。

https://docs.angularjs.org/guide/expression

Answer 2

检查应

<span class="error" ng-show="something.something===today">Can't be today's date<span>

你需要在控制器中定义今天

var date = new Date();
$scope.today = date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear();

Answer 3

你可以试试......

ng-show="isToday()"

并且在你的控制器中

$scope.isToday=function(){
  return $scope.myDateName==$filter('date')(new Date(),'mm/dd/yyyy');
};

Answer 4

我会为此创建一个指令，因为它是一个可重用的解决方案，所以这里是：

＆＃13;

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function($scope) {
  $scope.date = new Date().toLocaleDateString();
});

app.directive("weirdDate", function() {
  return {
    restrict: "A",
    require: "ngModel",

    link: function(scope, element, attributes, ngModel) {
      ngModel.$validators.weirdDate = function(modelValue) {
        return modelValue != new Date().toLocaleDateString();
      }
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="form" novalidate>
    <input type="text" weird-date ng-model="date" name="date" required>
    <pre ng-bind="form.date.$error | json"></pre>
    <p ng-if="form.date.$error.weirdDate">Date can't be today! (without ngMessages)</p>
    <div ng-messages="form.date.$error">
      <p ng-message="weirdDate" style="color: #ff0000">Date can't be today! (with ngMessages)</p>
    </div>
  </form>
</body>

</html>

＆＃13;

正如您可能已经注意到的那样，我使用了ngMessages directive，您可以阅读有关它们的好教程here。

AngularJS当前日期验证

4 个答案: