I have 2 directives: my-custom-form
and my-custom-select
. How can I trigger custom validation on the my-custom-select directive that is nested inside the my-custom-form directive??
Plunker http://plnkr.co/edit/PJIL8T2Fj1i4Fw4dyPjR?p=preview
my-custom-form directive usage:
<div ng-controller="MyExampleCtrl as exampleCtrl">
<my-custom-form form-name="exampleForm" form-submit="exampleCtrl.submit()"></my-custom-form>
</div>
my-custom-form directive
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
};
}]);
Inside 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>
The custom-select directive
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?
}
};
}]);
Inside the custom-select template:
<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>
In this case you could use the ngForm directive
It instantiates a FormController and gives you access to every input or select child element.
ng-form solves validating the nested directives when you are calling child directive use ng-form attribute with same form name you have given while create child form.
Child Directive Form
<form name="bankAccountForm">
....html.....
</form>
Parent Directive 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.