我有一个指令用一些输入包装form
元素。其中一个选项是传递formName
。通常,对于示例名称为myForm
的表单,要显示错误,您可以执行myForm.firstName.$error.required
之类的操作。
但是,当表单名称被动态传递给指令时,如何才能访问错误?
示例用法
<my-custom-form formName='myForm' formSubmit='parentCtrl.foo()'></my-custom-form>
指令
angular.module('example')
.directive('myCustomForm', [
function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'myCustomForm.directive.html',
scope: {
fornName: '@',
formSubmit: '&'
},
require: ['myCustomForm', 'form'],
link: function(scope, element, attrs, ctrls) {
var directiveCtrl = ctrls[0];
var formCtrl = ctrls[1];
scope.data = {};
scope.hasError = function(field) {
// how do i show the errors here?
};
scope.onSubmit = function() {
scope.formSubmit();
};
}
};
}]);
模板
<form name="{{ formName }}" ng-submit="onSubmit()" novalidate>
<div class="form-group" ng-class="{'is-invalid': hasError('fullName') }">
<input type="text" name="fullName" ng-model="data.full_name" required />
<div ng-show="hasError('fullName')">
<p>How do I show this error?</p>
</div>
</div>
<div class="form-group" ng-class="{'is-invalid': hasError('email') }">
<input type="text" name="email" ng-model="data.email" ng-minlength="4" required />
<div ng-show="hasError('email')">
<p>How do I show this error?</p>
</div>
</div>
<button type="submit">Submit</button>
</form>
答案 0 :(得分:0)
我认为你的代码唯一的问题是该指令需要自己,我认为这不会起作用。只需从需要中移除myCustomForm
即可。
要检查字段是否有错误,您只需要检查表单控制器中的$error
对象是否为空。
require: ['form'],
link: function(scope, element, attrs, ctrls) {
var formCtrl = ctrls[0];
scope.data = {};
scope.hasError = function(field) {
// Field has errors if $error is not an empty object
return !angular.equals({}, formCtrl[field].$error);
};