current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I created and directive in angularjs app which produces styled input in my application. It looks like this:

AC.directive('formInput',function ($compile) {
    return {
        transclude: true,
        replace: true,
        scope:{},
        templateUrl: '/views/partials/form/input.html',
        restrict: 'E',
        link: function(scope, element, attrs){

            scope.opts = attrs;

            if(attrs.ngModel){
                element.find('input').attr('ng-model', attrs.ngModel);
                $compile(element.contents())(scope.$parent);
            }

            if(!attrs.type){
                scope.opts.type = 'text';
            }
        }
    };
  }
)

And the template for it is:

<label class="acxm-textfield {{opts.cssclass}}">
  <span ng-bind="opts.labeltext"></span>
  <input type="{{opts.type}}" name="{{opts.inputname}}" value="{{opts.inputvalue}}" placeholder="{{opts.placeholder}}" ng-maxlength="{{opts.maxLength}}"/>
</label>

The call is simple: 

<form-input ng-model="UserProfile.FirstName" max-length="50" labeltext="{{'GENERAL.name' | translate}}" cssclass="acxm-p-horizontal" inputname="name" inputvalue="{{UserProfile.FirstName}}"></form-input>

I wanted to create validation for this field and I added an error information:

<span ng-show="showError(userInfoForm.name,'email')">
                    You must enter a valid email
</span>

And showError is:

$scope.showError = function(ngModelController, error) {

    return ngModelController.$error[error];
};

Basically it is copied form book: Mastering Web Application Development with AngularJS. And I have problem because when i log my form, which name is userInfoForm, in console I got {{opts.inputname}} instead of name property which value here should be "name". And the question is what am I doing wrong?

share|improve this question
    
take a look at my answer to a similar problem here: stackoverflow.com/questions/21455695/… –  Khanh TO Jan 30 '14 at 15:47
    
Declare the directive as in the link I posted and replace name="{{opts.inputname}}" with dynamic-name="opts.inputname" –  Khanh TO Jan 30 '14 at 15:49
    
Khanh yes I could create a directive but since my input is already a directive I added only: element.find('input').attr('name', scope.opts.inputname); and it adds a name attr but I cannot stil make work my validation :/ in showError the ngModelController is still undefined when I try to access my field... here is an example: plnkr.co/edit/xKktbdw1dP5elWKnmQMC?p=preview –  Adrian Wajs Feb 3 '14 at 15:07
    
Yes I think your remarks are good... Hmmm but how to make it work :) –  Adrian Wajs Feb 4 '14 at 8:38
    
I found out that my solution works, just forgot to put required to my input field. Silly me. I posted as an answer. Please have a look. –  Khanh TO Feb 4 '14 at 12:08

2 Answers 2

up vote 6 down vote accepted

Try my dynamic-name directive here: AngularJS dynamic form field validation

Replace name="{{opts.inputname}}" with dynamic-name="opts.inputname"

I also simplified your code for demonstration:

app.directive("dynamicName", function($compile) {
  return {
    restrict: "A",
    terminal: true,
    priority: 1000,
    link: function(scope, element, attrs) {
      var name = scope.$eval(attrs.dynamicName);
      if (name) {
        element.attr('name', name);
        element.removeAttr("dynamic-name");
        $compile(element)(scope);
      }
    }
  };
});

app.directive('formInput', function($compile) {
  return {
    replace: true,
    scope: {},
    templateUrl: 'formInput.html',
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.opts = attrs;


      $compile(element.contents())(scope);
    }
  }
});

Form Input template:

<label class="acxm-textfield {{opts.cssclass}}">
  <span ng-bind="opts.labeltext"></span>
  <input type="{{opts.type}}" dynamic-name="opts.inputname" ng-model="opts.inputvalue"
  placeholder="{{opts.placeholder}}" 
  ng-maxlength="{{opts.maxLength}}" required/> //use dynamic-name directive to bind dynamic names.
</label>

DEMO (try clearing the text to see the validation, I used required validation for quick demonstration, you could change the code to email validation). The key is using the dynamic-name directive.

share|improve this answer
    
Khanh thanks for help your example works YOU ROCK! :) I think that the main problem was that my directive used value and ng-model :) because only diff is that your directive doesn't use it :) –  Adrian Wajs Feb 4 '14 at 15:42
up vote 0 down vote

Here is another take on form / name validation directives stacklink

<form name="myFormName">
  <nested directives of many levels>
  ex: <input ng-repeat=(index, variable) in variables" type="text"
             my-name="{{ variable.name + '/' + 'myFormName' }}"
             ng-model="variable.name" required />
  ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
             my-name="{{ variable.name + '/' + 'myFormName' }}"
      </select>
</form

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

app.directive('rsName', function(){

  var rsNameError = "rsName directive error: "

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: 'ngModel', // ngModelController.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return } // no ngModel exists for this element

      // check rsName input for proper formatting ex. something/something
      checkInputFormat(attrs);

      var inputName = attrs.rsName.match('^\\w+').pop(); // match upto '/'
      assignInputNameToInputModel(inputName, ngModel);

      var formName = attrs.rsName.match('\\w+$').pop(); // match after '/'
      findForm(formName, ngModel, scope);
    } // end link
  } // end return

  function checkInputFormat(attrs){
    if( !/\w\/\w/.test(attrs.rsName )){
      throw rsNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
    }
  }

  function assignInputNameToInputModel(inputName, ngModel){
    ngModel.$name = inputName
  }

  function addInputNameToForm(formName, ngModel, scope){
    scope[formName][ngModel.$name] = ngModel; return
  }

  function findForm(formName, ngModel, scope){
    if( !scope ){ // ran out of scope before finding scope[formName]
      throw rsNameError + "<Form> element named " + formName + " could not be found."
    }

    if( formName in scope){ // found scope[formName]
      addInputNameToForm(formName, ngModel, scope)
      return
    }
    findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
  }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.