BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJSで日付の検証を行う

2022-02-19 13:15:06

質問

angularjsで作成したフォームで未来の日付を許可することができません。

以下は私のHTMLです。 

<div ngCloak ng-app="laurelMoney" ng-controller="myCtrl">
  <form name="userForm">
    <div class="form-group">
      <input type='date' id="trandate" class="form-control" ng-model="trandate" required ng-class="{ 'has-error' : userForm.trandate.$error }" />
      <p ng-show="userForm.trandate.$error" class="help-block">Transaction can't be in future</p>
    </div>

    <a href="#" class="btn btn-primary btn-sm btn-block" ng-click="submitForm()" type="submit">Add Transaction</a>
  </form>

そして、私のjavascriptはÑです。 

angular.module('laurelMoney', [])
  .controller('myCtrl', function($scope) {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1;
    var yyyy = today.getFullYear();
    if (dd < 10) {
      dd = '0' + dd
    }
    if (mm < 10) {
      mm = '0' + mm
    }
    today = yyyy + '-' + mm + '-' + dd;
    document.getElementById("trandate").setAttribute("max", today);
    $scope.submitForm = function() {

      if ($scope.userForm.$valid) {
        alert('our form is amazing');
      } else {
        console.log("Error");
      }

    };
  });

カレンダーがポップアップするときは問題なく動作しています。未来の日付はすべて無効になっていますが、日付入力ボックスで未来の日付に手動で変更することは可能です。

システム上、未来の日付の投稿も可能です。どうすればいいのでしょうか？

プランカー

ありがとうございます。

解決方法は？

さて、あなたの質問から理解したことは、単にエラーメッセージを投げるか、ユーザーが将来の日付を選択できないようにしようとしている、ということですね？では、これをご覧ください。

注意事項

  1. あなたの Angular のバージョンは完全に古いので、期待通りに動作しない可能性があります。
  2. ngCloak は ng-cloak ;
  3. を追加する必要があります。 名前 attribute をあなたの input を使用して検証します。
  4. また ngSubmit の代わりに、フォームを送信するために ng-click .
  5. コメントで指摘されているように、無効化することができます。 button を指定した場合 form は invalid でチェックするのではなく controller ;
  6. 最後に、日付を最大値として設定する場合（あなたの場合 今日 ということで、以下のようにします。 $scope.max = new Date() を作成し、ビューでそれを呼び出します。

以下はその完全な例です。 

(function() {
  'use strict';

  angular
    .module('laurelMoney', [])
    .controller('myCtrl', myCtrl);

  myCtrl.$inject = ['$scope'];

  function myCtrl($scope) {
    $scope.max = new Date();
  }
})();

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body ng-app="laurelMoney">
  <div ng-cloak ng-controller="myCtrl">
    <form name="userForm" novalidate ng-submit="submitForm()">
      <div class="form-group" ng-class="{ 'has-error' : userForm.trandate.$error }">
        <input type="date" name="trandate" class="form-control" required max="{{max}}" ng-model="trandate">
        <p ng-if="userForm.trandate.$touched && userForm.trandate.$error.required" class="help-block">Transaction is required</p>
        <p ng-if="userForm.trandate.$error.date" class="help-block">Transaction should be a valid date</p>
        <p ng-if="userForm.trandate.$error.max" class="help-block">Transaction can't be in future</p>
      </div>
      <button type="submit" class="btn btn-primary btn-sm btn-block" ng-disabled="userForm.$invalid">Add Transaction</button>
    </form>
    <pre ng-bind="userForm.trandate.$error | json"></pre>
  </div>
</body>

</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します