使用 Angularjs 和 Bootstrap datepicker 验证 StartDate EndDate答案

【问题标题】：StartDate EndDate validation with Angularjs and Bootstrape datepicker使用 Angularjs 和 Bootstrap datepicker 验证 StartDate EndDate
【发布时间】：2016-07-21 09:14:20
【问题描述】：

这是我的 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>

Angular 代码是这样的。

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

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

我想在我的页面中添加一些不错的日期验证。任何帮助将不胜感激.. 在此先感谢

【问题讨论】：

标签： javascript angularjs html angular-ui-bootstrap bootstrap-datepicker

【解决方案1】：

只需在 html 输入标签中写入 type="date" 即可。

【讨论】：

【解决方案2】：

您通过 '$watch' 编写的示例代码非常不支持且难以维护。如果添加新字段，您只需制作一个 500+ 的控制器。

我建议你创建：

ValidationFactory 将包含所有类型的验证方法；
FIELDS_CONFIG 将存储 {fieldName: 'string', validationErrorMessage: 'string', fieldType: 'string', validateIf: 'function', value: {} //path to another factory, where field origin value stored} 的对象；
仅在您将提供给它的专用 form、div 等和 $watch 整个模型上执行验证的指令；
将所有属性移动到专用的form 模型对象。

因此，一旦model 中的某些内容发生更改，指令将基于fieldType 从ValidationFactory 执行验证方法，该方法将使用value 传递给taht 方法。验证结果将存储在ValidationFactory.errors = {}，键为fieldName，以便轻松访问错误以显示validationErrorMessage。

某种反模式的更简单的方法是：

ng-change 指令到您要验证的每个字段。 ng-change 将接受 ValidationFactory.validateDate(value, message)。所有错误都应存储在ValidationFactory.errors = []，以便访问点从父控制器等检查ValidationFactory.isAnyErrors()。

【讨论】：