StartDate EndDate проверки с Angularjs и Bootstrape DatePicker

Question

Это мой HTML

<form name="myForm"> 
     <div class="row"> 
      <div class="col-md-2"> 
      <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" 
      class="form-control" data-datepicker-popup="MM-dd-yyyy" data-datepicker-append-to-body="true" 
      data-is-open="popup.fromOpened" data-ng-click="fromOpen()" placeholder="Start Date" data-ng-required="true" /> 
     </div> 
     <div class="col-md-2"> 
      <input data-ng-model="Data.EndDate" type="text" id="endDate" name="endDate" 
      class="form-control" data-datepicker-popup="MM-dd-yyyy" data-datepicker-append-to-body="true" 
      data-is-open="popup.toOpened" data-ng-click="toOpen()" placeholder="End Date" data-ng-required="true" /> 
     </div> 
     <div class="col-md-2"> 
      <button data-ng-click="Search()" class="btn btn-info">Search</button> 
     </div> 
     </div> 
     <div class="row"> 
     <span>Error list</span> 
     </div> 
    </form> 

Угловая код, как это.

$scope.$watch('Data.StartDate', validateDates); 
$scope.$watch('Data.EndDate', validateDates); 

function validateDates() { 
//  some code and highlight it on form 
} 

Я хотел бы добавить некоторые приличные подтверждения для дат на моей странице. любая помощь будет оценена .. Заранее спасибо

Answer 1

Просто напишите type = "date" в теге ввода html.

Answer 2

Код, который вы написали как пример с помощью '$ watch', является довольно неудобным и трудноподдерживаемым. В случае добавления новых полей вы просто создадите 500+ подобных контроллеров.

Я предлагаю вам создать:

1. ValidationFactory, который будет содержать методы проверки для всех типов;
2. FIELDS_CONFIG Объект, в котором вы укажете адрес {fieldName: 'string', validationErrorMessage: 'string', fieldType: 'string', validateIf: 'function', value: {} //path to another factory, where field origin value stored};
3. Директива, которая будет выполнять валидацию только по выделенным form, div и т. Д. И $watch вся модель, которую вы предоставите ей;
4. Перемещение всех объектов недвижимости на выделенный объект form.

Так как только что-то изменилось в model, директива будет выполняться методом проверки из ValidationFactory на основе fieldType, который будет использовать value перейти к Täht метода. Результат проверки будет сохранен в ValidationFactory.errors = {} с ключами fieldName, чтобы получить легкий доступ к ошибкам, чтобы показать validationErrorMessage.

Simpler подход, который как-то анти-паттерн:

ng-change директива каждого поля, которое необходимо проверить. ng-change примет ValidationFactory.validateDate(value, message). Все ошибки должны храниться на ValidationFactory.errors = [], чтобы иметь точку доступа для проверки ValidationFactory.isAnyErrors() от родительских контроллеров и т. Д.