AngularJS date validation

Question

Как я могу проверить валидацию даты в форме AngularJS для следующего кода?

<label for="startDate" class="control-label">Start Date:</label> 
<div class=""> 
    <input type="date" class="form-control" 
      id="startDate" ng-model="startDate" /> 
</div> 

<label for="endDate" class="control-label">End Date:</label> 
<div class=""> 
    <input type="date" class="form-control" 
      id="endDate" ng-model="endDate" /> 
</div> 

<div class="alert alert-warning" ng-show=""> 
    // ?? 
</div> 

Если введена только одна из дат, в форме необходимо указать другую дату. Если обе даты пусты или оба введены, то он должен успешно отправить форму.

Answer 1

Если вы не хотите использовать любой контроллер или JS и хотите сделать это с чистой HTML. Попробуйте этот метод

Редактировать ваш HTML, чтобы:

<label for="startDate" class="control-label">Start Date:</label> 
<div class=""> 
    <input type="date" class="form-control" 
      id="startDate" ng-model="startDate" /> 
</div> 

<label for="endDate" class="control-label">End Date:</label> 
<div class=""> 
    <input type="date" class="form-control" 
      id="endDate" ng-model="endDate" /> 
</div> 

<div class="alert alert-warning" ng-show="!startDate && endDate ||startDate && !endDate "> 
    // Do what ever you want to do here 
</div> 

Добавлено этот ответ тоже, так что вы можете выбрать, какие когда-либо лучше всего подходит вам. Если вы хотите сделать больше функций в submit, я настоятельно рекомендую вам использовать контроллер. Если вы просто заинтересованы в UI идти вперед с простым HTML решением

Answer 2

Вам нужно снять это с помощью контроллера. Проверьте, пуст ли $ scope.startDate или нет. Если! Empty, то $ scope.endDate должен быть пустым, иначе нет ошибки.

`$ scope.startDate = null; $ scope.endDate = null; если (! $ Scope.startDate) {

если (! $ Scope.endDate) {$ scope.error = ложь}

} еще {если (! $ Scope.endDate) {$ scope.error = true; $ scope.reason = "Введите действительную дату окончания". }} `

Answer 3

Это мой подход к решению вашего вопроса

HTML-

<label for="startDate" class="control-label">Start Date:</label> 
<div class="" > 
    <input type="date" class="form-control" 
      id="startDate" ng-model="startDate" /> 
</div> 

<label for="endDate" class="control-label">End Date:</label> 
<div class=""> 
    <input type="date" class="form-control" 
      id="endDate" ng-model="endDate" /> 

</div> 
<span>{{errMessage}}</span> 
    <button ng-click='checkErr(startDate,endDate)'>Submit</button> 

Добавить этот код в ваш контроллер для HTML

$scope.checkErr = function(startDate,endDate){ 
    $scope.errMessage = ''; 

    if(!startDate && endDate){ 
     $scope.errMessage = 'please Enter Start Date'; 
     return false; 
    } 
    if(!endDate && startDate){ 
     $scope.errMessage = 'please Enter End Date'; 
     return false; 
    } 
    if(endDate && startDate || !endDate && !startDate){ 
     $scope.errMessage ='Successfully Submitted'; 
     // you can add you submit function here 
    } 
    }; 

Это отбросит сообщение об ошибке над кнопкой отправки, если какая-либо из дат введена, а одна из них оставлена. Он покажет, какой из дат, которые должен ввести пользователь, и если обе даты введены или обе даты не введены, она будет успешно отправлена. вы можете добавить свою функцию отправки в случае if.

Надеется, что это помогает

Answer 4

Вы можете вызвать эту функцию возможности для любого вида даты валидаций убедитесь, что на нг подать вы вызываете dateValidator (год, месяц, дата)

$scope.dateValidator = function(year, month, date) { 

    var dates = new Date(year, month - 1, date); 
    if (dates.getFullYear() == year && dates.getMonth() + 1 == month && dates.getDate() == date) { 
    alertify.success('Valid Date'); 

    } else { 
    alertify.error('Invalid date'); 
    return false; 
    } 
};