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 3 down vote favorite
1

I have a form with many input fields that are validated by AngularJS.

How can ignore one of them only from being validated ? It is only used as a commodity for the user to enter a value and add a row to a grid (which is part of the form).

 <input type="text" ng-model="url" >
 <button class="btn btn-primary btn-xs" ng-click="addUrl();">+</button>

In the above code, the user enters some text in the input and click the + button. The problem is that the input is validated by AngularJS when the form is submitted, which is not what I want.

I've tried adding ng-non-bindable to the input. That works but then I can't bind the 'url' property obviously....

What's the workaround for this ?

share|improve this question
    
input has no name, shouldn't get validated since it is not able to be submitted –  charlietfl Nov 19 '13 at 15:20
    
Maybe it's not validated, but the form becomes dirty though. –  Sam Nov 19 '13 at 15:21
    
You can reset the $dirty property of a form after the user clicks the button and addUrl() is called. See $setPristine: docs.angularjs.org/api/ng.directive:form.FormController –  m.e.conroy Nov 19 '13 at 15:27
    
alternately, could move input out of form and position it on top of form, depending on layout constraints –  charlietfl Nov 19 '13 at 15:29
    
@m.e.conroy I can't do that because the form might have been dirty from some other modifications. –  Sam Nov 19 '13 at 19:14

1 Answer 1

up vote 0 down vote

You could inject the form controller in the directives linking function, and remove the input from validation like this:

app.directive('customInput', function(){
  return {
    template: '<input>',
    restrict : 'E',
    require : '^form',
    link: function(scope, elem, attrs, formCtrl) {
      var inputCtrl = elem.controller('ngModel');
      formCtrl.$removeControl(inputCtrl);
    }
  }
})

I've setup a plunkr here: http://plnkr.co/edit/AR0Zk1ybQ7OvmHEGirVL?p=preview

share|improve this answer
    
When you replace the custom-input with <input>, there's no model on it anymore, and that's why the form doesn't show as dirty. The plunker works the same even without the link function. And if you add a ng-model="field2" in the template, it doesn't work. Is there a way to get access to the input's value via angular without having the field affect the form's pristine state? –  Scott Driscoll Apr 29 '14 at 16:53
    
Yes, you are right, I see my mistake. One further precondition must be set to use $removeControl: The input element must have a name. The function is defined as: form.$removeControl = function(control) { if (control.$name && form[control.$name] === control) { delete form[control.$name]; } forEach(errors, function(queue, validationToken) { form.$setValidity(validationToken, true, control); }); arrayRemove(controls, control); }; But unfortunatly though delete is executed then, it does not what I would expect. –  westor Apr 29 '14 at 21:47

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.