Add angular field validation dynamically

Question

I am trying to create form builder application in Angular.js and I got stuck on validating fields. Angular provides great validation but one thing is missing for my usecase, and that is turning various validation on / off dynamically. I want to let my user add new form fields and then specify a validation (Angular default minlength, maxlength, ...) for each field alone.

Lets say that I want to create a button, that will add / remove minlength validation on a specified field (fields are stored in my model and are displayed through custom form and field directives), how should I do this?

I created a simple Plunker - http://plnkr.co/edit/pCXgwgnNbZkcAcl263JN?p=preview can you tell me what shoud be inside the toggleValidation() function?

HTML

<div ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" class="form-group">
          <label>Name</label>
          <input type="text" ng-model="user.name" class="form-control" name="name" />
          <p class="help-block" ng-show="userForm.name.$invalid && !userForm.name.$pristine">Validation error.</p>
        </div>
        <a href="" class="btn btn-success" ng-click="toggleValidation()">Toggle minlength validation</a>

JS

validationApp.controller('mainController', function($scope) {

    $scope.toggleValidation = function()
    {
      // ???
    }

});

Leon Revill · Accepted Answer · 2015-01-12 15:32:09Z

3

You should consider using something like http://formly-js.github.io/angular-formly/#!/ to dynamically generate forms from a set of JSON objects. Then it would very very easy to toggle certain validation methods on and off.

answered Jan 12, 2015 at 15:32

Leon Revill

2,0303 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pirozek Over a year ago

Thanks! that provided me with inspiration needed :)

MarcoS · Accepted Answer · 2015-01-12 15:02:08Z

0

I should try something like this:

validationApp.controller('mainController', function($scope) {

  $scope.toggleValidation = function(validationFlag) {
    $scope.validationIsOn = validationFlag;
  }

  $scope.minlengthValidation = function (field, minlen) {
    if ($scope.validationIsOn) {
      return (field.length >= minlen);
    } else {
      return true;
    }
  }

});

Note: this code is not real code, but it just wants to give an idea to build the real code...

answered Jan 12, 2015 at 15:02

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

4 Comments

Pirozek Over a year ago

I was thinking about more generic solution, not just minLength but at least all default Angular validation options (except of require, which has its own if), is there any generic solution for this?

MarcoS Over a year ago

I.e., you want to enable or disable all valitations at once?

Pirozek Over a year ago

No, just one type of validation at once for one of the fields. When you let user define fields for dynamic forms, you want to give him options to set a validation for that field. And this validation is dynamically set for each field.

MarcoS Over a year ago

I see, it makes sense. You should give more details about the way your user specifies the validations required for each field... However, I suppose the logic I did show in my answer could be easily generalized...

Collectives™ on Stack Overflow

Add angular field validation dynamically

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related