javascript - Use ngModel on a custom directive with an embedded form, with working validation? -
i have commonly reused set of form inputs reused throughout application, trying encapsulate them in custom directive. want set ngmodel on directive , have split editable in several different inputs (some of them directives themselves) within main directive.
at same time, need form validation results passed chain parent form can display appropriate messages , styles.
what simplest , idiomatic way implement this?
these (simplified) templates should give example of i'm going for...
outertemplate.html
<form name="outerform"> <my-directive ng-model="ctrl.mycomplexmodel" name="mydirectiveinstance" custom-required="ctrl.enablevalidateone" toggle-another-validation="ctrl.enablevalidatetwo"> </my-directive> <div ng-messages="outerform.mydirectiveinstance.$error"> <ng-message when="customrequired">this required.</ng-message> <ng-message when="anothervalidation">this required.</ng-message> <ng-message when="innervalidationone">something wrong field 1.</ng-message> <ng-message when="innervalidationtwo">something wrong field 2.</ng-message> <ng-message when="innervalidationthree">something wrong field 3.</ng-message> <!-- etc... --> </div> </form> mydirectivetemplate.html
<div ng-form="mydirectiveform"> <div ng-class="{'has-error': mydirectiveform.fieldone.$invalid}"> <ui-select ng-model="model.fieldone" name="fieldone" required> </ui-select> </div> <div ng-class="{'has-error': mydirectiveform.fieldtwo.$invalid}"> <input type="number" ng-model="model.fieldtwo" name="fieldtwo" ng-pattern="directivectrl.someregex" ng-required="directivectrl.fieldtwoisrequired"> </div> <!-- etc... --> </div> at moment, both mydirectiveform , mydirectiveinstance publishing properties of outerform formcontroller. hoping make directive black box, fact mydirectiveform attaching directly outerform bothers me , seems indicate i'm doing wrong.
here's directive definition looks right now.
mydirective.js
app.directive('mydirective', function() { return { restrict: 'e', template: 'mydirectivetemplate.html', controller: 'mydirectivectrl', scope: { model: '=ngmodel', customrequired: '=?', toggleanothervalidation: '=?' }, require: 'ngmodel', link: function(scope, ielem, iattrs, ngmodelcontroller) { // black-box internal validators // custom validator avoid conflicts ngrequired ngmodelcontroller.$validators.customrequired = function(modelvalue, viewvalue) { if(!scope.customrequired) return true; // on first digest field isn't registered on form controller yet if(angular.isundefined(scope.mydirectiveform.fieldone)) return true; return !scope.mydirectiveform.fieldone.$error.required; }; ngmodelcontroller.$validators.anothervalidation = function(modelvalue, viewvalue) { if(!scope.anothervalidation) return true; return scope.passesbusinessrule(); }; ngmodelcontroller.$validators.innervalidationone = function(modelvalue, viewvalue) { if(!scope.anothervalidation) return true; if(angular.isundefined(scope.mydirectiveform.fieldtwo)) return true; return !scope.mydirectiveform.fieldtwo.$error.pattern; }; /* etc... */ // deep-watching model validations trigger on updates of properties scope.$watch('model', function() { ngmodelcontroller.$validate(); }, true); } }; });
this how understand directives. in case both ng-model , mydirective directives. it's not clear me if doing
1) wrapper on ng-model or 2) custom directive
because if want custom directive, can pass in data, ex.
{ scope: { data: '=' }
and if want wrapper, shouldn't pass in other properties related ngmodel, means can still pass in data
ctrl.mycomplexmodel, btw. model object can not assigned ng-model, because ng-model not hold object, holds data.
note: found post, angularjs - create directive uses ng-model
and apparently, can pass in model, https://docs.angularjs.org/api/ng/type/ngmodel.ngmodelcontroller
anyway, it's complicated me :) if want make wrapper, pattern seems me
- pass in data
- "has a" object
but apparently might doing "is a" object.
Comments
Post a Comment