오류: [ngModel:datefmt] 2015-05-29가 예상됨T19:06:16.693209Z가 날짜로 지정됨 - 각도
작업중입니다angular
에의 신청.Django
와 함께rest-framework
..
앱은 서버로부터 json으로 정보를 받습니다.열쇠 중 하나는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)
저는 이미 모든 것을 시도해 보았습니다: (형식은 angular의 문서에 기재되어 있는 설명대로입니다.
이는 wards ng-model의 각도 1.3+에서 발생해야 합니다.date/time 입력의 경우 유효한 날짜 개체여야 합니다.날짜 문자열 표현은 더 이상 허용되지 않습니다.문자열을 날짜 개체로 변환해야 합니다().$scope.created_time = new Date(dateString)
ng-model에 바인드합니다.에러 링크를 따라가면, 에러와 그 해결 방법이 명확하게 표시됩니다.
와 같은 모든 날짜 관련 입력에는 모델이 날짜 개체여야 합니다.모델이 다른 것일 경우 이 오류가 발생합니다.이 경우 Angular는 검증 오류를 사용자에게 표시하기 때문에 위의 검증 오류를 설정하지 않지만 오류 상태는 사용자가 아닌 잘못된 응용 프로그램 로직으로 인해 발생합니다.
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
});
모델 값을 변환하는 간단한 지시문을 만듭니다.
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);
}
}
});
PSL의 답변에 더해서.이것은 각도가 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 응용 프로그램에서 작동합니다.
이 답변을 바탕으로
날짜가 하루 단축되면 이 코드를 사용합니다.
new Date(moment.utc(value).format('l LT'))
cs1707 answer와 같은 방법으로 디렉티브를 작성해야 했지만 부분 문자열에서 시간 변환으로 해야 했습니다.빠른 코드 복사를 원하는 분들을 위한 답변으로 추가했습니다.
다음 지시문을 추가합니다.
app.directive("formatTime", function(){
return {
require: 'ngModel',
link: function(scope, elem, attr, modelCtrl) {
modelCtrl.$formatters.push(function(modelValue){
var string=modelValue;
var date=new Date();
var time=string.split(':');
date.setHours(+time[0]);
date.setMinutes(time[1]);
date.setSeconds(time[2]);
return date;
})
}
}
})
그리고.format-time
HTML 입력 태그:
<input type="time" data-ng-model="mytime" format-time>
문제 사실 이것은 날짜 형식의 문제이며, 이 코드를 사용하여 이 문제를 해결했습니다.솔루션:다음 코드 조각으로 이 문제를 해결할 수 있습니다.
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 형식 = "2013년 2월 1일 금요일 06:00 AM", 다른 사람이 문제를 해결하는 데 도움이 되기를 바랍니다.저는 이러한 오류에 직면하여 이를 해결했습니다.
다음 오류가 발생하여 개체를 직접 사용했습니다.제가 수행한 해결 마녀를 게시합니다.
Dateedit.=userData에 개체를 되었습니다.1:$userData.dob=new Date(userData.dob), 2:$scope.edit.userdob=userData.dob; 사용자 데이터.dob; 사용자 데이터.dob; 사용자 데이터: 사용자 데이터.dob; 사용자 데이터: 사용자 데이터: 사용자 데이터.dob; 사용자 데이터.
개체가 있는 배열의 모든 날짜를 업데이트해야 하는 경우
var data = [
{ id: "1" , birthday: "2016-01-20T11:24:20.882Z"},
{ id: "2" , birthday: "2016-01-20T11:24:20.882Z"},
{ id: "3" , birthday: "2016-01-20T11:24:20.882Z"},
];
function convertDataStingToObject (data) {
for(var i=0; i < data.length; i++ ){
console.log('string: ' + data[i].birthday);
data[i].birthday = new Date(data[i].birthday);
console.log('updated: ' + data[i].birthday);
console.log(typeof(data[i].birthday));
}
return data;
}
convertDataStingToObject(data);
언급URL : https://stackoverflow.com/questions/30537886/error-ngmodeldatefmt-expected-2015-05-29t190616-693209z-to-be-a-date-a
'programing' 카테고리의 다른 글
CSRF와 Django, React+Redux(Axios 사용) (0) | 2023.02.10 |
---|---|
WordPress REST API 글로벌 검색(API V2) (0) | 2023.02.10 |
ReactJS 애플리케이션의 MVVM 아키텍처 패턴 (0) | 2023.02.10 |
TypeScript / Angular에서 인터페이스 및 모델을 사용하는 경우 (0) | 2023.02.10 |
Java 바이트 버퍼에서 문자열로 (0) | 2023.02.06 |