More complicated validation scenarios seems to be not supported

[corvis]

The Problem

I have create user form which along with other fields contains password and passwordRepeat fields.
Validation should be triggered on blur and the goal is to get "Passwords should match" message near the passwordRepeat field.

Investigation

The first idea was to add custom keyword in JsonSchema which will compare values. Something like this:

{
  type: "object",
  required: ['password', 'confirmPassword'],
  properties: {
    password: {
      type: "string"
    },
    confirmPassword: {
      type: "string",
      equalTo: "password"
    }
  }
}

equalTo should be registered in tv4 on initialization stage.
However later I realized that angular-schema-form splits original schema by field so each field knows only about own piece of schema which makes impossible to reffer other fields.

Solution

To be honest I didn't find really good solution here. I just forked angular-schema-form repository and added optional callback function in form definition which will be invoked after default validation in case when tv4 decided that value is valid.
Here is usage example from my project:

{
  key: 'confirmPassword',
  title: 'Confirm password',
  type: "password",
  validationMessage: validationMessagesBuilder.build('Confirm password', null, {
    'notMatch': "Passwords do not match"
  }),
  afterValidated: function (value, fieldModel, formModel, schema) {
    if (formModel.password != value) {
      return 'notMatch';
    }
  }
}

It should return error code if there is an error and undefined otherwise.

So...

Does anyone have any better ideas? Maybe someone solved similar issue before... Maybe I missed something...

Anyway if you think that this approach is useful and correct I can prepare pull request.

Chears,
Dmitry

[mike-marcacci]

Hi @corvis - that's a really great question. It's generally against the goals of this project to change the json-schema spec (which is actually an ietf standard). However, the ability you want is part of the v5 $data proposal for constant.

You would do something like:

{
    "type": "object",
    "properties": {
        "password": {"type": "string"},
        "confirm": {
            "constant": {"$data": "1/password"}
        }
    },
    "required": ["password", "confirm"]
}

I'm just about 100% sure that TV4 doesn't support this yet (although others like jjv do), so json-schema-form can't support this right now. However, I just wanted to mention this as the "correct" way to do this.

I believe there are some other workarounds provided by the form declaration that could allow you to add this functionality, but I'll defer to those more familiar with them. Either way, if you're using a server-side validator that supports constant and $data, you can declare it like above without breaking the client side.

[corvis]

Hi @mike-marcacci, thanks for really quick reply.
It seems like the problem is not only in validation engine but in schema-form itself. Each form input is isolated from whole schema, it knows only about own definition which makes impossible to use references. E.g. for our example validator of confirmPassword field will get the following schema:

{
  type: 'object', 
  properties: {
      "confirmPassword": { type: "string", constant: {"$data": "1/password"}}
  }
}

no password field will be there as such reference {"$data": "1/password"} will be invalid. Same problem as I described in Investigation section.

Checkout this code snippet from Schema-Form sources (factory sfValidator) which do actual validation. It creates wrap inserts the only property and passes it to tv4:

    var wrap = {type: 'object', 'properties': {}};
    var propName = form.key[form.key.length - 1];
    wrap.properties[propName] = schema;

    if (form.required) {
      wrap.required = [propName];
    }
    var valueWrap = {};
    if (angular.isDefined(value)) {
      valueWrap[propName] = value;
    }
    return tv4.validateResult(valueWrap, wrap);

[davidlgj]

Hi @corvis,

as @mike-marcacci said generally we don't add stuff to the schema :-). Its not as pretty as a proper schema solution but I'd say this is easiest to solve password fields is an add-on/custom type that type renders two inputs and handles the validation the "standard angular way" by injecting the ngModelController and adding a validation function to that.

[davidlgj]

Also I've been pondering adding some kind of support for Angular 1.3s async validators, probably by adding a form attribute to tackle the "check if this username is already taken" scenario.

[brian428]

I think this is really needed. As far as I can tell, right now, async validators are completely ignored. They run if you set them up, but they don't affect form validity once they return. And I don't see any way to alter the validity of the field or the form within the async validator success or failure callback. Even explicit calls to the ngModelController $setValidity don't seem to have any effect.

[corvis]

@davidlgj I added that option to from definition, not to the schema. Basically in the save way as validation messages are set.

Also here is one more pretty common usecase which will be nice to keep in mind:

We have 2 date\time fields: "Publication date" and "Valid due date". And that should be constraint which validates that "Publication date" value is less than "Valid due date"

[brian428]

In the meantime, if anyone has any ideas about how to wedge async validation into the schema form (particularly from within custom directive controllers), I'd love to hear them. I just keep running into walls trying to make it work. :-/

[burdiuz]

@davidlgj you do not add stuff to schema but you modify it. If you will have logic that will not split or modify schema and use it as it was passed , that would solve this problem and many others. Currently I have same problem but with different scenario.
My schema is for address form and looks like:

{
          "type":"object",
          "properties":{
            "streetLine1":{
              "title":"Street",
              "type":"string",
              "maxLength": 44,
              "minLength": 3
            },
            "state":{
              "title":"State",
              "type":"string",
              "enum": ["NY", "CT"]
            },
            "postalCode":{
              "title":"ZIP",
              "type":"string",
              "pattern":"^[0-9]{5}(-[0-9]{4})?$",
              "validationMessage":"Please Provide Valid ZIP Code"
            },
            "isoCountry":{
              "title":"Country",
              "type":"string",
              "enum": ["US", "CA"]
            },
            "contact": {
              "type": "object",
              "description": "Contact object",
              "anyOf": [
                {
                  "properties": {
                    "firstName":{
                      "title":"First Name",
                      "maxLength":44,
                      "minLength":1,
                      "type":"string"
                    },
                    "lastName":{
                      "title":"Last Name",
                      "maxLength":44,
                      "minLength":2,
                      "type":"string"
                    },
                    "companyName":{
                      "title":"Company",
                      "maxLength":44,
                      "minLength":3,
                      "type":"string"
                    }
                  },
                  "required": [
                    "companyName"
                  ]
                }, {
                  "properties": {
                    "firstName":{
                      "title":"First Name",
                      "maxLength":44,
                      "minLength":1,
                      "type":"string"
                    },
                    "lastName":{
                      "title":"Last Name",
                      "maxLength":44,
                      "minLength":2,
                      "type":"string"
                    },
                    "companyName":{
                      "title":"Company",
                      "maxLength":44,
                      "minLength":3,
                      "type":"string"
                    }
                  },
                  "required": [
                    "firstName",
                    "lastName"
                  ]
                }
              ],
              "properties": {
                "middleInitial": {
                  "title": "Middle Initial",
                  "maxLength": 1,
                  "minLength": 1,
                  "type": "string"
                }
              }
            }
          },
          "required": ["contact", "isoCountry", "state", "postalCode", "streetLine1"]
        }

And here object that passes tv4 validation for such schema:

      var data = {
        isoCountry: "US",
        state: "CT",
        streetLine1: "Street 1",
        postalCode:"12345",
        contact: {
          firstName: "ololo",
          lastName: "zzz",
          "middleInitial": "s"
        }
      };

I've tried to use schema-form in different ways but it seems it won't work with such schemas because schema-form modifies it splitting and disabling complex validation. So, as I see it now, schema-form has many of JSON Schema features disabled out of the box.

[burdiuz]

@corvis, look for custom decorators, and for postProcess function of schema-form to pass additional data to your form field.

[davidlgj]

@brian428

I fiddled with $asyncValidators and I think I got it working in a custom type, this is my test code:

angular.module('test',['schemaForm','ui.ace']).config(function(schemaFormDecoratorsProvider) {

  schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator',
    'asynctest',
    'async.html'
  );

}).run(function($templateCache){

  // Get and modify default templates
  var tmpl = $templateCache.get('directives/decorators/bootstrap/default.html');

  $templateCache.put(
    'async.html',
    tmpl.replace('type="{{form.type}}"', 'type="text" async-test')
  );


}).directive('asyncTest', function($q) {
  return {
    restrict: 'A',
    scope: false,
    require: 'ngModel',
    link: function(scope, attr, element, ngModel) {

      ngModel.$asyncValidators['test'] = function(modelValue, viewValue) {
          var value = modelValue || viewValue;

          var deferred = $q.defer();
          setTimeout(function() {

            if (value === 'foo') {
              deferred.resolve();
            } else {
              deferred.reject();
            }
            scope.$apply();
          }, 200)
          return deferred.promise;
      }
    }
  }
})

Hope that helps! Ping me if you got any questions

[avishnyak]

I found another interesting way to do this without having to modify the actual templates. Using Angular decorators we can do this:

    app.config(function ($provide) {
        $provide.decorator('schemaValidateDirective', function ($delegate) {
            var directive = $delegate[0];

            var link = directive.link;

            directive.compile = function () {
                return function (scope, element, attrs, ngModel) {
                    link.apply(this, arguments);

                    // ngModel.$asyncValidators is accessible here as well as the sync version.
                };
            };

            return $delegate;
        });
    });

[davidlgj]

@avishnyak awesome solution!

@corvis are you satisfied with the decorator solution? If so please close the issue.

[brian428]

For me, it turns out that getting my custom directives to use the async validators was only half the battle. It turns out that right now, there's really no way to know when all the async validators (across the form as a whole) are finished. I have an open ticket with the Angular team on this (angular/angular.js#10768).