Validation Error

Prologue

A set of error messages may be created during JSON Schema validation, every error has a fixed keyword, you can configure errors in global config to override default error messages, you can also handle internationalization error messages in global config. Following is an example when it is failed to pass required field validation:

[{
  "keyword": "required",
  "dataPath": ".client",
  "schemaPath": "#/required",
  "params": {"missingProperty":"client"},
  "message":"Required Field"
}]

message is used to render error information on page.

Note:Validation is triggered when it is first time rendering, but there is no any visual presentation, you can set <sf firstVisual> to show error effect when it is first time rendering.

Custom Error Information

Support to globally configure errors (commonly used for internationalization) or configure ui.errors (for a specific property) to handle error information.

ui.errors

schema: SFSchema = {
  properties: {
    email: {
      type: 'string',
      title: 'Email',
      format: 'email',
      maxLength: 20,
      ui: {
        errors: {
          'required': 'Required Field'
        }
      }
    }
  }
};

keyword

No matter which way to build error information, keyword must be used to distinguish error type. You can find the full list of ERRORSDEFAULT here.

Custom Validation

JSON Schema cannot satisfy business requirements all the time, e.g. sometimes, need to distinguish different validation rules based on other properties:

Property Validation

schema: SFSchema = {
  properties: {
    type: {
      type: 'string',
      title: 'Type',
      enum: [
        { value: 'mobile', label: 'Mobile' },
        { value: 'email', label: 'email' },
      ],
      default: 'mobile',
    },
    mobile: {
      type: 'string',
      title: 'Mobile',
      ui: {
        visibleIf: { type: ['mobile'] },
        showRequired: true,
        validator: val => (!val ? [{ keyword: 'required', message: 'Required mobile' }] : []),
      },
    },
    email: {
      type: 'string',
      title: 'Email',
      ui: {
        visibleIf: { type: ['email'] },
        showRequired: true,
        validator: val => (!val ? [{ keyword: 'required', message: 'Required email' }] : []),
      },
    },
    pwd: {
      type: 'string',
      title: 'Password',
      ui: {
        type: 'password',
      },
    },
  },
  required: ['type', 'pwd'],
};

Asynchronous Validation

Following example show how to validate if a username exists asynchronously:

schema: SFSchema = {
  properties: {
    name: {
      type: 'string',
      ui: {
        showRequired: true,
        validator: (value: any) => this.http.get(`/user/check/${value}`).pipe(
          map(res => res ? [ { keyword: 'required', message: 'Username exists'} ] : [])
        )
      }
    }
  }
};

Note: Because a new instance is generated in every time of validation, some control operations are not able to do, e.g. debounceTime.

setErrors

Use the setErrors method to adjust error messages.

this.sf.getProperty('/name')?.setErrors({ keyword: 'required' });
this.sf.getProperty('/name')?.setErrors({ message: 'Please input your username!' });
// Clean current error messages
this.sf.getProperty('/name')?.setErrors();

Visual

Can configure global config or ui.onlyVisual to control if only show error visual but not error message.

Debug

JSON Schema has strong requirement on format, for example, date must follow the format described in RFC3339:

{
  properties: {
    time: {
      type: 'string',
      ui: { widget: 'date', mode: 'range' },
      title: 'Date',
      format: 'yyyy-MM-dd HH:mm:ss'
    }
  },
  ui: {
    debug: true
  }
}

format is an invalid format of date, detailed validation error information will be shown in console when debug: true is set.

Error: unknown format "yyyy-MM-dd HH:mm:ss" is used in schema at path "#/properties/time"