Startdatum Enddatum Validierung in AngularJS einreichen Form

deaktiviert werden soll

ich nicht wana meine Form einreichen, wenn Startdatum-Enddatum Validierung fehlschlägt ... In meiner Form, wenn ich diese haben ...
Startdatum Enddatum Validierung in AngularJS einreichen Form

<form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> 

<input type="text" placeholder="Start Date" ng-model="schedule.startDate" class="form-control" ui-date novalidate required> 
<input type="text" name="endDate" placeholder="End Date" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required> 

<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="errMessage || scheduleForm.$invalid">Add Schedule</button>

und in der Steuerung:

$scope.checkErr = function(startDate,endDate) { 
     $scope.errMessage = ''; 
     var curDate = new Date(); 

     if(new Date(startDate) > new Date(endDate)){ 
      $scope.errMessage = 'End Date should be greater than start date'; 
      // var err=function() { 
      // $window.alert('End Date should be greater than start date');}; 
      // err(); 
      return false; 
     } 
     if(new Date(startDate) < curDate){ 
      $scope.errMessage = 'Start date should not be before today.'; 
      // var err=function() { 
      // $window.alert('Start date should not be before today.');}; 
      // err(); 
      return false; 
     } 
    };

und in Zusatzfunktion:

$scope.addSchedule=function(schedule){ 

    $scope.schedules.push({ 
     startDate: schedule.startDate, 
     endDate: schedule.endDate, 
    }); 

    schedule.startDate=''; 
    schedule.endDate=''; 
    };

prob ist Taste deaktivieren sieht bt seine so dass Daten hinzugefügt werden ... helfen danken im Voraus

Quelle

2016-04-15 swati kiran

nur zu wissen ... Passiert es in allen Browsern? Ich meine, Sie sehen es deaktiviert zu sein, aber in der Lage zu klicken Sie auf die Schaltfläche ... –

Aktualisieren Sie Ihre ng-deaktivieren wie as-ng-disabled = "errMessage! = '' || ScheduleForm. $ Invalid" auch Ihre $ Scope zu initialisieren. errMessage = '' vor 'chkErr' Nachricht –

Warum Sie Validierung nicht hinzufügen, wenn Elemente bereit sind. Schauen Sie sich die Demo hier https://plnkr.co/edit/JunWzLjhLCPMqZnxsSYw?p=preview

var app = angular.module('myApp', ['ui.date']); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.schedule = {}; 
 
    $scope.dateOptions = { 
 
    changeYear: true, 
 
    date:$scope.schedule.startDate, 
 
    changeMonth: true, 
 
    yearRange: '1900:-0', 
 
    maxDate: new Date(new Date().setDate(new Date().getDate() + 2)), 
 
    minDate:new Date() 
 
    }; 
 
    
 
    $scope.addSchedule=function(schedule){ 
 
    console.log($scope.schedule) 
 
    }; 
 

 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="date.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> 
 

 
<input type="text" placeholder="Start Date" ng-model="schedule.startDate" ui-date-format="DD, d MM, yy" 
 
     class="form-control" min-date="minDate" max-date="maxDate" ui-date="dateOptions" novalidate required> 
 
<!--<input type="text" name="endDate" placeholder="End Date" ui-date-format="DD, d MM, yy" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required> 
 
--> 
 
<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="scheduleForm.$invalid">Add Schedule</button> 
 
</form> 
 
    </body> 
 

 
</html>

Quelle

2016-04-15 14:27:55

Zeit vergleichen richtig getTime() Funktion

if(new Date(startDate).getTime() > new Date(endDate).getTime())

und überprüfen Datum Validierung in Schaltfläche sollte so dass keine Notwendigkeit checkErr() auf Enddatum Änderung verwenden

<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="checkErr(schedule.startDate,schedule.endDate)|| scheduleForm.$invalid">Add Schedule</button>

und Ihre checkErr Funktion wie:

$scope.checkErr = function(startDate,endDate) { 
    var curDate = new Date(); 
    // can set error message if need to show 
    if(new Date(startDate).getTime() > new Date(endDate).getTime()){ 
     return true; // if invalid 
    } 
    if(new Date(startDate).getTime() < curDate.getTime()){ 
     return true; // if invalid 
    } else { 
     return false // if valid 
    } 
};

Quelle

2016-04-15 14:37:01

Startdatum Enddatum Validierung in AngularJS einreichen Form

Antwort

Verwandte Themen