web-dev-qa-db-ja.com

エラー：[ngModel：datefmt] `2015-05-29T19：06：16.693209Z`が日付になると予想されました-Angular

angularapplication with Django with rest-framework。で作業しています。

アプリはサーバーからjsonで情報を受け取ります。キーの1つはcreated_time...です。このフィールドの値は、iso-8601に基づいた形式で、たとえば2015-05-29T19:06:16.693209Zです。

クライアントにはフィールドがあります：

<input type="time" ng-model="created_time">

しかし、データが到着すると、このエラーが発生します：

Error: [ngModel:datefmt] Expected `2015-05-29T19:06:16.693209Z` to be a date http://errors.angularjs.org/1.3.13/ngModel/datefmt?p0=2015-05-29T19%3A06%3A16.693209Z
at REGEX_STRING_REGEXP (angular.js:63)
at Array.<anonymous> (angular.js:19807)
at Object.ngModelWatch (angular.js:23289)
at Scope.$get.Scope.$digest (angular.js:14235)
at Scope.$get.Scope.$apply (angular.js:14506)
at done (angular.js:9659)
at completeRequest (angular.js:9849)
at XMLHttpRequest.requestLoaded (angular.js:9790)

私はすでにすべてを試しました:(形式は角度のドキュメントの指示とまったく同じです...

javascriptangularjsdjangodjango-rest-framework
54
Yehuda

これはangular 1.3+で発生している必要があります。日付/時刻入力のワードngモデルの1.3以上は有効な日付オブジェクトである必要があり、日付の文字列表現は許可されなくなりました。文字列を日付オブジェクト（$scope.created_time = new Date(dateString)）に変換し、ng-modelにバインドする必要があります。 エラーリンク に従うと、エラーに関する明確な説明とその解決方法が示されます。

などのすべての日付関連の入力では、モデルがDateオブジェクトである必要があります。モデルが別のものである場合、このエラーがスローされます。この場合、Angularは検証エラーを設定しません。これらのエラーはユーザーに表示されるためですが、誤った状態はユーザーではなく不正なアプリケーションロジックが原因で発生します。

81
PSL

RESTサービスからデータを取得する場合、フィールドを日付に変換するだけです。

$http.get(url).success(function(data){
     $scope.data = data; // get row data
     $scope.data.mydatefield = new Date($scope.data.mydatefield); // convert filed to date
});
34
Kamiel Ahmadpour

モデル値を変換する単純なディレクティブを作成します。

HTML：

<input date-input type="time" ng-model="created_time">

指令：

app.directive('dateInput', function(){
    return {
        restrict : 'A',
        scope : {
            ngModel : '='
        },
        link: function (scope) {
            if (scope.ngModel) scope.ngModel = new Date(scope.ngModel);
        }
    }
});
18
Rodolfo Jorge Nemer Nogueira

PSLの答えに加えて。これは、angular 1.3+要件をDateオブジェクトにオーバーライドする方法です。

<input type="date" ng-model="book.date" date-format/>

app.directive('dateFormat', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      //Angular 1.3 insert a formater that force to set model to date object, otherwise throw exception.
      //Reset default angular formatters/parsers
      ngModelCtrl.$formatters.length = 0;
      ngModelCtrl.$parsers.length = 0;
    }
  };
});

AngularFire $ firebaseObjectで使用でき、$ bindTo 3ウェイバインディングで正常に動作します。 $ firebaseObjectサービスを拡張する必要はありません。 Ionic/cordovaアプリケーションで動作します。

jsfiddleでの作業例

この回答 に基づく

9
Andrey Klochkov

日付が1日減る場合は、このコードを使用します。

new Date(moment.utc(value).format('l LT'))
0
Sameera

私はこのエラーがあり、オブジェクトを直接使用しました：私が実行した解決策を投稿しています：
1：$ userData.dob = new Date（userData.dob）; 2：$ scope.edit.userdob = userData.dob; 1エラーが発生する前に、オブジェクトを直接作成し、それを編集スコープに割り当てて、問題を解決しました。

0
Eknath Kulkarni

問題実際、これは日付形式の問題です。このコードを使用してこの問題を解決しました。 解決策：以下のコードはこの問題を解決します：

            var options = {
                weekday: "long", year: "numeric", month: "short",
                day: "numeric", hour: "2-digit", minute: "2-digit"
            };
            $scope.created_time = $scope.created_time.toLocaleTimeString("en-us", options);

en-us format = "Friday、Feb 1、2013 06：00 AM"、これが他の人の問題解決に役立つことを願って、私はそのようなエラーに直面し、これで解決しました。

0
Usman