这是我的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
}
我想在页面中为日期添加一些不错的验证。任何帮助将不胜感激.. 提前致谢
答案 0 :(得分:0)
只需在html输入标记中写入type =“date”即可。
答案 1 :(得分:0)
您通过&#39; $ watch&#39;作为示例编写的代码非常不受支持且难以维护。如果要添加新字段,您只需要制作一个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
中的某些内容发生变化,指令将根据ValidationFactory
从fieldType
执行验证方法,该方法将使用value
传递给taht方法。验证结果将存储在ValidationFactory.errors = {}
,密钥为fieldName
,以便轻松访问错误以显示validationErrorMessage
。
以某种方式反模式的简单方法是:
对要验证的每个字段的 ng-change
指令。 ng-change
将接受ValidationFactory.validateDate(value, message)
。所有错误都应存储在ValidationFactory.errors = []
,以便具有从父控制器等检查ValidationFactory.isAnyErrors()
的访问点。