angular directive complex form data validation

Question

i'm building a multi-part form where multiple directives each hold multiple inputs. the directives are all inside a form who's name i pass as an attr to the directives isolated scope . with it i pass an object with the input names for validation with ng-messages . now.. this form is huge so i'll post only a small example here ,

the problem - the input gets the name i wanted but i can't seem to access the form name property for ng-messages...

 here is my main form:  (it has a couple of these directives in it...)
  <form  name="flightsForm" ng-show="formStagesArr[1]" novalidate>

    <flight-form 
        ng-model="formObject.flight.outboundSec"
        form-name="flightsForm"
        validation-names="outSecValidation"
        >
   </flight-form>

 </form>

here is the main scope where i created the outSecValidation object:

 $scope.outValidation = {
       "dateName":'outDate' 
 }

here is my flight-form directive returned DDO:

 return {
            restrict: 'EA' ,
            controller: 'flightFormCtrl' ,
            require : 'ngModel',
            scope: {
                 ngModel: '=',
                 formName: '=',
                 validationNames: '='
            },
            link: function(scope , elem , attrs){
            },
            templateUrl:templateUrl
   }

and here is my template:

 <md-contect>
        <md-datepicker 
            name="{{validationNames.dateName}}" 
            ng-model="ngModel.date"
            md-placeholder="{{ngModel.ArrOrDep}}"
            required>
        </md-datepicker>
    </md-contect>

    <div class="validation-messages" 
     ng-messages="formName.{{validationNames.dateName}}.$error">
    <div ng-message="required">field required</div>
    </div>

this code gets an "Syntax Error: Token '{' is not a valid identifier" error. but if i cant use the two way data binding inside ng-messages how can i validate the field by it's name? becuase this expression "formName.validationNames.dateName.$error" obviously is undefined right?

any ideas?
if what i'm doing is seriously wrong and you can offer a better way please feel free.. thanks!

Simone Zandara Simone Zandara · Accepted Answer · 2015-11-30T07:05:08

You can accomplish what you want just doing this.

<div class="validation-messages"  ng-messages="formName[validationNames.dateName].$error">

However do you really need to pass validationNames to the directive? Should not be simpler just pass the name of the input? I don't see any use in the template of such object. Also It is a bit confusing because it looks like your template only handles one type of input which is 'dateName'. Anyway I hope I answered your problem.

angular directive complex form data validation

1 Answers