[英]Validate custom select directive nested inside another directive
我有2个指令: my-custom-form
和my-custom-select
。 如何在嵌套在my-custom-form指令中的my-custom-select指令上触发自定义验证?
柱塞 http://plnkr.co/edit/PJIL8T2Fj1i4Fw4dyPjR?p=preview
my-custom-form指令的用法:
<div ng-controller="MyExampleCtrl as exampleCtrl">
<my-custom-form form-name="exampleForm" form-submit="exampleCtrl.submit()"></my-custom-form>
</div>
我的自定义格式指令
angular.module('myApp')
.directive('myCustomForm', [function() {
var link = function(scope, element, attrs, ctrls) {
var formCtrl = ctrls[0];
var thisDirectiveCtrl = ctrls[1];
scope.submitMyForm = function() {
if (formCtrl.$valid) {
//submit form
thisDirectiveCtrl.submit();
}
};
// Show some inline validation
scope.hasError = function(field) {
var isInvalidandSubmitted = scope.submitted && formCtrl[field].$invalid;
var isInvalidandDirty = formCtrl[field].$invalid && formCtrl[field].$touched && !formCtrl[field].$pristine;
return isInvalidandSubmitted || isInvalidandDirty;
};
};
var controller = function($scope, $element, $attrs) {
var vm = this;
// this is the form model
vm.data = {};
// this executes the submit function from the parent controller (MyExampleCtrl)
vm.submit = function() {
vm.formSubmit();
};
};
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: 'templates/my-custom-form-template.html',
scope: {
formName: '@',
formSubmit: '&'
},
require: ['form', 'myCustomForm'],
link: link,
controller: controller,
controllerAs: 'myCustomFormCtrl',
bindToController: true
};
}]);
在my-custom-form-template.html中
<form name="{{formName}}" novalidate>
<div class="form-group" ng-class="{ 'is-invalid': hasError('firstName')}">
<input type="text" ng-model="myCustomFormCtrl.data.firstName" name="firstName" required />
<p ng-show="hasError('firstName')">Enter a first name.</p>
</div>
<div class="form-group">
<!-- Nested directive here -->
<div class="form-group">
<my-custom-select ng-model="myCustomFormCtrl.data.country" name="country" required></my-custom-select>
</div>
</div>
<button type="button" ng-click="submitMyForm()">Submit</button>
</form>
custom-select指令
angular.module('myApp')
.directive('myCustomSelect', ['DataService', function(DataService) {
return {
restrict: 'E',
replace: true,
require: '^?myCustomForm',
templateUrl: 'templates/my-custom-select-template.html',
scope: {
name: '@',
ngModel: '=',
required: '='
},
link: function(scope, el, attrs, parentCtrl) {
scope.countries = [];
// Set required attribute
if (scope.required) {
el.find('select').attr('required', true);
}
// call out to external service and populate select
DataService.get().then(function(res) {
scope.countries = res;
});
// How can I trigger validation?
}
};
}]);
在自定义选择模板中:
<div class="select">
<select ng-model="ngModel" name="{{name}}" ng-change="updateSelect()">
<option value="" disabled>Select option</option>
<option ng-repeat="country in countries" value="{{country.code">{{country.name}}</option>
</select>
<!-- how can I do something like this ? -->
<div ng-if="required">
<p ng-show="hasError('country')">Please select a</p>
</div>
</div>
在这种情况下,您可以使用ngForm指令
它实例化一个FormController,并允许您访问每个输入或选择子元素。
ng-form解决了在调用子指令时验证嵌套指令的问题,请使用ng-form属性,其属性名称与创建子表格时给定的名称相同。
儿童指令表
<form name="bankAccountForm">
....html.....
</form>
家长指示表
<form name="customerContractingEntityForm" ng-submit="saveCustomer()" novalidate>
............ parent HTML........
<div ng-form="bankAccountForm"> //// this live validates the child directive
<div ws-bank-account></div> //// calling child direcive here
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.