Как отключить кнопку «Отправить» до тех пор, пока в поле ввода не будет введена допустимая дата? - PullRequest
Новая
       1

Как отключить кнопку «Отправить» до тех пор, пока в поле ввода не будет введена допустимая дата?

1 голос
/ 22 февраля 2020

У меня есть форма, которая используется в качестве фильтра. Это код для поля ввода даты. 

<label>Date:</label>
<input type="text" id="dateFilter"
       ng-model="gridFilters.dateFilter"
       placeholder="MM/DD/YYYY"
       ng-disabled="loadingData" />
<span class="glyphicon glyphicon-calendar" style="width: 30px"></span>

Когда контроллер angular инициализируется, значение gridFilters.dateFilter устанавливается на undefined и не должно быть по умолчанию. Это правильное поведение.

Это код для моей кнопки отправки. Я бы хотел, чтобы кнопка оставалась отключенной, пока пользователь не выберет / не введет правильную дату. 

<button type="button"
        class="btn btn-success pull-right"
        style="top: -5px; margin-left: 20px"
        ng-click="filter()"
        ng-enabled="gridFilters.dateFilter!== null && gridFilters.dateFilter!== undefined && Date.parse(gridFilters.dateFilter)"
        ng-hide="session.Status !== 0">
    Search
</button>

Как вы можете видеть, я несколько раз проверял значение gridFilters.dateFilter. , Ничего из этого не работает. В частности, когда я загружаю страницу, моя кнопка включена, как будто все, если в селектор была введена правильная дата. Как я могу проверить, является ли значение даты фактически датой? Кроме того, это должно работать в Inte rnet Explorer. Я сомневаюсь, что это будет иметь значение, но IE наш корпоративный, предпочтительный браузер.

1 Ответ

2 голосов
/ 22 февраля 2020

Вам необходимо использовать ng-disabled - нет атрибута HTML с именем enabled.

И попробуйте это: 

<button type="button"
        class="btn btn-success pull-right"
        style="top: -5px; margin-left: 20px"
        ng-click="filter()"
        ng-disabled="gridFilters.dateFilter === null || gridFilters.dateFilter === undefined || Date.parse(gridFilters.dateFilter)"
        ng-hide="session.Status !== 0">
    Search
</button>

This ng-disabled="gridFilters.dateFilter === null || gridFilters.dateFilter === undefined" работает 100%

Но для Date.parse(gridFilters.dateFilter) Я не уверен, сработает ли это или нет.

Другой подход: 

<form name="dataForm" novalidate ng-submit="submitForm()">
   <input type="date" name="date" class="form-control" required 
          ng-model="gridFilters.dateFilter">
   <button type="submit"
           class="btn btn-success pull-right"
           style="top: -5px; margin-left: 20px"
           ng-click="filter()"
           ng-disabled="dataForm.$invalid"
           ng-hide="session.Status !== 0">
      Search
   </button>
</form>
...