UPDATE: IT bestätigt wurde, dass dies ein WINKEL BUG
Check ist: https://github.com/angular/angular.js/issues/14734#issuecomment-224558516
der Fall ist, ich bin Versuchen, ein Datepicker-Feld zu erstellen, das erkennt, ob die Eingabe ein ungültiges Datum ist (die Gültigkeit von Monaten und Tagen ist ebenfalls enthalten, wie 2015-02-30 ist ungültig, weil es keinen 30. Februar gibt) und ist ebenfalls erforderlich. Also habe ich eine benutzerdefinierte Formulargültigkeit über Direktive erstellt, um das ungültige Datum zu erkennen. Die benutzerdefinierte Gültigkeit funktioniert gut, scheint jedoch die $ error.required und $ invalid nicht zu synchronisieren, da ich "ngModel. $ Validators.available" verwendet habe.
Hier ist eine Arbeits Plunker: http://plnkr.co/edit/NuDGB64IetpcsaVB03T7?p=preview
Sie in Plunker bemerken, dass die error.required $ wahr aber die $ ungültig ist nur leer sondern verwandelt sich auf true, wenn Sie Eingang ein ungültiges Datum und false, wenn die Datumseingabe gültig ist. Kurz gesagt, wird das Formular nicht als ungültig betrachtet, wenn die Eingabe leer ist, die sehr für meine ng-Klasse benötigt wird
Der Code ist:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body>
<form ng-controller="myCtrl" name="bioManagementForm" novalidate>
Degree: <br />
<p>Invalid Input: -- {{ bioManagementForm.in_company_since.$invalid }}</p>
<p>Required -- {{ bioManagementForm.in_company_since.$error.required }}</p>
<input class="form-control input-form since" ng-class="{ 'error': bioManagementForm.in_company_since.$invalid && notifications }" type="text" id="in_company_since" name="in_company_since" ng-model="input.in_company_since" ng-required="true" datepicker>
</form>
</body>
<script>
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
});
myApp.directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModel) {
console.log(ngModel);
datePatternCounter = [];
// $(function(){
if(!scope.viewOnly){
element.attr("placeholder", "YYYY-MM-DD");
}
element.datepicker({
changeYear: true,
changeMonth: true,
yearRange: "1900:+50",
showButtonPanel: true,
closeText: 'Clear',
dateFormat:'yy-mm-dd',
onSelect:function (date) {
ngModel.$setViewValue(date);
scope.$apply();
},
// Custom function that clears the date value of the model when the "Clear" button is clicked on the datepicker
onClose: function(date){
var event = arguments.callee.caller.caller.arguments[0];
if(Number(date) && date.length == 8){
// alert("dean");
year = date.slice(0, 4);
month = date.slice(4, 6);
day = date.slice(6, 8);
newDate = year+"-"+month+"-"+day;
ngModel.$setViewValue(newDate);
ngModel.$render();
}else{
// alert("armada");
// Code if with dash
// Do nothing
}
// ngModel.$error.datePattern
if(event['type'] == 'click'){
ngModel.$setViewValue(undefined);
ngModel.$render();
}
},
beforeShow: function (e, t) {
id = document.querySelector('#ui-datepicker-div');
angular.element(id).addClass('HideTodayButton');
if(element.hasClass('birth_date')){
element.datepicker("option", "maxDate", 0);
}
},
});
// });
// START Syntax to check if the date is valid or not in real time
ngModel.$validators.available = function (modelValue, viewValue) {
if(modelValue){
var check = modelValue.split('-');
var y = parseInt(check[0], 10);
var m = parseInt(check[1], 10);
var d = parseInt(check[2], 10);
var date = new Date(y,m-1,d);
if (date.getFullYear() == y && date.getMonth() + 1 == m && date.getDate() == d) {
check = true;
} else {
check = false;
name = ngModel.$name;
if(datePatternCounter.indexOf(name) == -1){
datePatternCounter.push(name);
element.parent().siblings("span.errors").append('<span class="invalid-date" ng-if="'+ngModel.$error.available+'"> * Invalid Date <br /></span>');
}
}
}
return check;
}
// END Syntax to check if the date is valid or not
}
}
});
</script>
</html>
Die Bindung 'ng-model =" input.in_company_since "scheint falsch zu sein, sollte sie' ng-model = "in_company_since" '? –
Das ist nicht der Fall ,, Eigentlich ist dies nur ein Teil der Vorlage .. Ich habe viele Eingänge andere Eingabe ng-Modelle sind "input.in_company_until", "input.in_company" für diese ng-Modelle in gespeichert werden ein einzelnes JSON-Objekt –