我正在开发一个项目，该项目具有类似的提交表单，因此我决定将一些字段移至指令。
表格范例：
<div loading class="col-sm-12" ng-controller="Controller">
<form name="myForm" role="form" novalidate>
<fieldset class="lines-header-border">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Date</label>
<div class="col-sm-7">
<date-field
model="myModel"
date-picker-options="datePickerOptions"
for-name="date"
for-ng-class="myForm.date.$invalid"
is-required="true"/>
</div>
<div class="col-sm-4">
<input class="form-control"
name="amount"
ng-model="amount"
ng-class="{ 'has-error' : myForm.amount.$invalid }"
required/>
</div>
</div>
</fieldset>
</form>
</div>
日期字段指令：
.directive('dateField', function() {
return {
restrict: 'E',
replace: true,
scope: {
model: '=',
datePickerOptions: '=',
isRequired: '@',
forName:'@',
forNgClass: '&'
},
template: '<input ui-date="datePickerOptions" type="date" name="{{forName}}" class="form-control" ng-model="model" ng-class="{ \'has-error\' : forNgClass()}" ng-required="isRequired"/>'
};
});
提交时的验证问题：其他字段在单击表单提交按钮时得到验证，但此日期字段未通过验证。我认为问题出在哪里for-ng-class="myForm.date.$invalid"。
有什么建议？
在您的情况下，您想通过指令属性“ for-ng-class”访问控制器作用域变量“ myForm.date。$ invalid”。将“ @”分配给指令范围变量“ forNgClass”以进行双向数据绑定。输入字段更改后，该类将相应更新。
scope:{
.....
forNgClass: "@"
.....
}
我实现了一个简单的示例：
更新：由于angular无法动态生成输入元素的名称属性。我们需要以内部形式包装dateField的输入元素（通过使用ngForm指令）。您可以参考Angular Doc以获得有关angular世界中嵌套表格的更多详细信息。
<!DOCTYPE html>
<html>
<head>
<style>
.has-error{
background:#ccc;
border: 1px solid red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script src="angular-ui-date.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<form name="myForm" novalidate>
<h2>Selected date: {{dateData}}</h2>
<date-field model="dateData" is-required="true"></date-field>
<date-field model="dateData2" is-required="true"></date-field>
<h3>myForm is invalid?</h3>{{myForm.$invalid}}
</form>
</div>
<script>
angular.module("MyApp",['ui.date'])
.controller("MyCtrl",function($scope){
})
.directive("dateField",function(){
return {
restrict: "E",
replace: "true",
template: '<ng-form name="subForm"><input ui-date ui-date-format="yy-mm-dd" type="date" ng-class="{\'has-error\':subForm.myDate.$invalid}" name="myDate" ng-model="model" ng-required="isRequired"/></ng-form>',
scope:{
model: "=",
isRequired: "@"
}
};
});
</script>
</body>
</html>
这是一个在线演示。您可以参考它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句