Re-validate input on SELECT element's change event

Question

I am writing an AngularJS app and in this app there is a domain-management tool. When a domain is selected, I generate the domain-records in a table, letting the user edit each row. Since the fields are dynamically created, I use ng-form to enable validating each row individually, since they share the same name.

Each domain-record has a content field where an IP, CNAME, or such resides. I validate this field using a regex pattern generated from a function based on which record type is selected (A, CNAME, TXT, etc.).

The problem is that when I edit let's say, an A record, then change the record-type to CNAME, the form still appears valid since no new validation of the content-field has been performed. The only way for me to re-validate it is to start typing in the content field which then works fine.

Check images below:

I press edit on the A record and everything looks fine: enter image description here

I change the record type to CNAME and the form still appears valid even though the regex changed. When I change the type I want the content (1.2.3.4) to be re-validated since it's a new regex in place: enter image description here

I start typing in the content field and now the form correctly becomes invalid. I want this to happen when I change the record-type, not only when I start typing again: enter image description here

#Slim version of the template to give you an idea on whats going on
<form novalidate name="recordForm" class="css-form" ng-controller="EditRecordCtrl">

    <table>

        <tr ng-repeat="record in domain.data.0" class="gradeA">

            <td ng-init="startingTypeData = record.type" class="domains-td" ng-switch on="record.edit">
                <span ng-switch-default>{{record.type}}</span>
                <span ng-switch-when="true">
                    <select ng-change="domainRecordContentType(record.type)" ng-init="domainRecordContentType(record.type)" ng-model="record.type" ng-options="c for c in domainRecordTypes" class="span12">
                    </select>
                </span>
            </td>

            <td ng-init="startingContentData = record.content" class="domains-td validation-dropdown-error-parent" ng-switch on="record.edit">
                <span ng-switch-default>{{record.content}}</span>
                <span ng-switch-when="true">
                    <ng-form name="innercContentForm">
                        <span class="validation-dropdown-error" ng-show="innercContentForm.content.$error.pattern">
                            {{ 'RECORD_EDIT_FORM_RECORD_CONTENT_PATTERN_MSG' | translate }} ( {{ record.type }} )
                        </span>
                        <input type="text" ng-model="record.content" name="content" required class="span12 edit-record-input" ng-pattern="domainRecordContentRegex.0" required />
                    </ng-form>
                </span>
            </td>

        </tr>

    </table>

</form>

How can I re-validate the input field when I change the drop-down menu?

Plunker example: http://plnkr.co/edit/VAR5ho Note! Small bug not showing the A record in the first row. You can still test the issue tho as I did in the images above.

Update using Thomas custom directive

Before chaning dropdown enter image description here

After change first dropdown from A to CNAME all content fields are wiped enter image description here

Update save button

<button ng-disabled="recordForm.$invalid" ng-switch-when="true" ng-if="hideRecordType(record.type)" ng-click="recordForm.$valid && editRecord(record, domainId); record.edit=false; $parent.startingNameData=record.name; $parent.startingTypeData=record.type; $parent.startingContentData=record.content; $parent.startingTTLData=record.ttl; $parent.startingPrioData=record.prio" type="submit" class="btn btn-block btn-primary btn-icon" ><i></i>{{ 'DOMAINS_SAVE_BUTTON' | translate }}</button>

Last update.. odd behavior regarding compiled element

I press edit and it goes into my normal edit view enter image description here

I start typing a new IP address until it becomes valid enter image description here

If I make the content invalid after being valid once, like adding a dot the value gets wiped out. Why? enter image description here

Current directive based on Thomas code:

domainModule.directive('revalidate', function($compile) {
    return {
        restrict: 'A',
        link : function (scope, element, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
              var reg = scope.$parent.domainRecordContentRegex[0];

              if(!$(element).parent().parent().next().find('ng-form').find('input').val().match(reg)){

                  $compile($(element).parent().parent().next().find('ng-form').children('input[name="content"]').removeClass('ng-valid-pattern'))(scope);
                  $compile($(element).parent().parent().next().find('ng-form').children('input[name="content"]').addClass('ng-invalid-pattern'))(scope);

              }

            });
        }
    };
});

I select the actual field now and change the class to make it invalid if the regex dont match. This way the Save button also gets invalid. This works when changing in the dropdown, but it corrupts the compiled element somehow.

I added a plunker example in the bottom of my question. It as a small bug where the first record content fields gets wiped out due the regex. This doesnt happen in the real version but I didnt put more time into fixing that, you can still test the problem out. — JoakimB
– JoakimB, Commented Sep 14, 2013 at 17:11

Community · Accepted Answer · 2017-05-23 12:01:20Z

4

To trigger validation, in ng-change of select set the value of input to its value. Change line 44 in your plunker to

<select ng-change="domainRecordContentType(record.type);innercContentForm.content.$setViewValue(innercContentForm.content.$viewValue)" ng-init="domainRecordContentType(record.type)" ng-model="record.type" ng-options="c for c in types">

Updated plunker http://plnkr.co/edit/D1AFHi

Credit: https://stackoverflow.com/a/17102401/69362

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Sep 18, 2013 at 18:23

Deepak N

2,5712 gold badges30 silver badges45 bronze badges

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

8 Comments

Thomas Pons Over a year ago

Oh god you're a STAR ! Thx ! My brain will bur with my solution :)

JoakimB Over a year ago

This was a very simple solution, I like it. My real template and plunker differs slightly though. Look in the top of my post for the slim template example. I tried this in my real version and it didnt work. Might be because of ng-switch?

Thomas Pons Over a year ago

Oh @JoakimB i'm sorry for you lol i hope that you can get a solution simpler than mine

JoakimB Over a year ago

Deepak N, could you comment on my question above?

Deepak N Over a year ago

@JoakimB, It would be easier to debug if you can reproduce the issue by updating the plunker to use ng-switch similar your original code.

|

joakimbl · Accepted Answer · 2013-09-22 09:04:50Z

3

+50

I think the best solution would be to create your own validation directive:

.directive('myValidRec', function () {
  var genRegex = function(type){ //...
  };
  return {
    require:'ngModel',
    link: function (scope, el, attrs, ngModel) {

      var validate = function(data){
        var regex = genRegex(scope.$eval(attrs.myValidRec));
        if(regex){
          ngModel.$setValidity('record', regex[0].test(data));  
        }
        return data;
      };

      // triggers validation when the model value changes
      ngModel.$formatters.push(validate);
      ngModel.$parsers.push(validate);

      // triggers validation when the user changes the record type
      scope.$watch(attrs.myValidRec,function(){
        validate(scope.$eval(attrs.ngModel));
      });
    }
  }
});

This allows for a much cleaner markup:

<td>
  <select ng-model="record.type" ng-options="c for c in types">
  </select>
</td>

<td>
  <ng-form name="innercContentForm">
    <span ng-show="innercContentForm.content.$error.record">
      Pattern error ( {{ record.type }} )
    </span>
    <input type="text" ng-model="record.content" name="content" 
           my-valid-rec="record.type" required />
  </ng-form>
</td>

Check out this plnkr: http://plnkr.co/edit/QzQdYN?p=preview

answered Sep 22, 2013 at 9:04

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

1 Comment

JoakimB Over a year ago

This is just brilliant, worked like a charm! Thank you joakimbl!

Thomas Pons · Accepted Answer · 2013-09-18 17:40:56Z

1

You can do that with a directive on drop-down menu like that :

angular.module('App').directive('revalidate', function($compile) {
return {
    restrict: 'A',
    link : function (scope, element, attrs) {
      scope.$watch(attrs.ngModel, function (v) {
          var reg = scope.$parent.domainRecordContentRegex[0];
          if(!$(element).parent().next().find('ng-form').find('input').val().match(reg)){
              $compile($('button[type="submit"]').attr('ng-disabled', "true"))(scope);  
          }

        });
      }
    }
});

In this directive you're watching the value of the model for the drop-down menu or the element that takes the directive.

If the value change the directive will take the value of the input and check is this value match the regEx pattern define in your controller. If not you call the $compile method to re-set the ng-disabled attribute to the submit button.

The valid is here again.

Look at the docs to understand the $compile in details : http://docs.angularjs.org/guide/directive

Hope it helps if you need more help ask it :) i'll happy to help you again ;) !

Happy coding

UPDATE :

Ok so if you $compile your input the value of the input is lost because the value is not persost on the scope yet ...

So to keep the value of your input if you $compile it do like that :

angular.module('App').directive('revalidate', function($compile, $timeout) {
return {
    restrict: 'A',
    link : function (scope, element, attrs) {
      scope.$watch(attrs.ngModel, function (v) {
          var reg = scope.$parent.domainRecordContentRegex[0];
          if(!$(element).parent().next().find('ng-form').find('input').val().match(reg)){
              var value = $(element).parent().next().find('ng-form').find('input').val();
              $compile($(element).parent().next().find('ng-form').find('input').attr('ng-class', "ng-invalid-pattern"))(scope);
              $timeout(function(){
                $(element).parent().next().find('ng-form').find('input').val(value);
              }, 0);
          }

        });
      }
    }
});

Here you stock the value of your input in the "value" var and then after the $compile you're doing a $timeout with a delay of 0.

In this $timeout (that return a promise ---> The asynchronism powerful XD) you re-set the value of your input and voila !!

edited Sep 18, 2013 at 17:40

answered Sep 17, 2013 at 7:24

Thomas Pons

7,7293 gold badges40 silver badges55 bronze badges

15 Comments

Thomas Pons Over a year ago

Maybe you'll have bugs because i can test the plunker (i'm at office and i've got a big big proxy). But this is the right way ! Say me if you have troubles

JoakimB Over a year ago

Hi Thomas, thanks for replying. I tried your code. Problem is that the form has dynamicly created fields, using nested form "ng-form" for each row. If I am editing two separate rows, your code revalidates everything, not just the row that I am currecntly editing. I updated the main question with an image to demostrate what happens with your code.

Thomas Pons Over a year ago

Yes he revalidates everything because my selector takes all the input. You have to do your personal selector

Thomas Pons Over a year ago

I'll do for the wiped :) check the new code he revalidate only one input

JoakimB Over a year ago

Looking allot better. Now however, when I change from A to lets say CNAME and start typing in the field, the content-field wipes itself when Iam typing.. like www.some-domain. <- then it goes blank. I cant see in your code when this is happening

|

Kavitha K Gowd · Accepted Answer · 2013-09-17 07:23:13Z

0

I think the solution would be to watch "record.type" model and on change of it, trigger ur new regex validation. But in order to do that the model "record.content" has undergo a change which you can perform through code.

answered Sep 17, 2013 at 7:23

Kavitha K Gowd

5271 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

Re-validate input on SELECT element's change event

Update using Thomas custom directive

Update save button

Last update.. odd behavior regarding compiled element

4 Answers 4

8 Comments

1 Comment

15 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update using Thomas custom directive

Update save button

Last update.. odd behavior regarding compiled element

4 Answers 4

8 Comments

1 Comment

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related