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

  1. pass in data
  2. "has a" object

but apparently might doing "is a" object.


Comments

Post a Comment

Popular posts from this blog

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

recursion - Can every recursive algorithm be improved with dynamic programming? -

i first year undergraduate csc student looking competitive programming. recursion involves defining , solving sub problems. understand, top down dynamic programming (dp) involves memoizing solutions sub problems reduce time complexity of algorithm. can top down dp used improve efficiency of every recursive algorithm overlapping sub problems? dp fail work , how can identify this? the short answer is: yes. however, there constraints. obvious 1 recursive calls must overlap. i.e. during execution of algorithm, recursive function must called multiple times same parameters. lets truncate recursion tree memoization. can use memoization reduce number of calls. however, reduction of calls comes price. need store results somewhere. next obvious constraint need have enough memory. comes not-so obvious constraint. memory access requires time. first need find result stored , maybe copy location. in cases, might faster let recursion calculate result instead of loading somewher...
Read more

c - Why does alarm() cause fgets() to stop waiting? -

i playing around signals in c. main function asks input using fgets(name, 30, stdin) , , sits there , waits. set alarm alarm(3) , , reassigned sigalrm call function myalarm calls system("say pay attention") . after alarm goes off, fgets() stops waiting input , main fn continues on. happens if change myalarm set variable , nothing it. void myalarm(int sig) { //system("say pay attention"); int x = 0; } int catch_signal(int sig, void (*handler)(int)) { // when signal comes in, "catch" , "handle it" in way want struct sigaction action; // create new sigaction action.sa_handler = handler; // set it's sa_handler attribute function specified in header sigemptyset(&action.sa_mask); // "turn signals in sa_mask off?" "set sa_mask contian no signals, i.e. nothing masked?" action.sa_flags = 0; // not sure, looks aren't using of available flags, whatever may return sigaction(sig, ...
Read more