我正在开发一个项目，该项目具有类似的提交表单，因此我决定将一些字段移至指令。
表单示例:
<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”访问 Controller 作用域变量“myForm.date.$invalid”。将“@”分配给指令范围变量“forNgClass”以进行双向数据绑定(bind)。当输入字段更改时，类将相应更新。
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>
这是一个Online demo 。你可以引用一下。
关于javascript - AngularJs 使用指令中的输入字段验证表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24178581/