options-sm2-forms

Chosen Option:
==============

columns:

  firstName: 
    type: text // default widget is input
    required: true
  
  email:
    type: email // default widget is input
    required: true
  
  bio:
    type: text
    widget: htmlEditor
  
  score:
    type: smallint
    widget: rating
    min: 1
    max: 100
    step: 1
    icon: star
  
  salary:
    type: money // default widget is input
    min: 0
    
  identificationType:
    type: string
    widget: select
    autocomplete: false
    options:
      passport: "Passport"
      cedula: "Cédula"
  
  friends:
    type: user // default widget is select, with autocomplete
    allowMultiple: true

Option 3: id as field

age:
  type: input
  dataType: integer

documentType:
  type: dropdown
  dataType: string
  options: 
    - ...

nps:
  type: scale
  min: 0
  max: 10
  step: 1
  style: stars

enabled:
  type: toogle

Option 4: JSONSchema

Si, se ve feo. Si, es verboso. Pero próximamente será un estándar (está en final review) https://json-schema.org/ Puede tener campos extra.
La validación se puede hacer literalmente con "plug and play" utilizando ajv.

https://www.npmtrends.com/ajv-vs-joi-vs-yup-vs-validate.js

https://www.npmjs.com/package/ajv

La validación se hace así:

const Ajv = require('ajv');
var validate = new Ajv().compile(schema);
var valid = validate(input);
if (!valid) console.log(validate.errors);

y listo. VALIDADO.

De esta manera delegas lo que le intersa al front ("como renderizar") y al back ("como validar mis datos").

Hay herramientas para generar los JSONSchemas sin que sea doloroso, de ser necesario.

================

{
  "definitions": {},
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "http://example.com/root.json",
  "type": "object",
  "title": "The Root Schema",
  "required": [
    "age",
    "documentType",
    "nps",
    "enabled"
  ],
  "properties": {
    "age": {
      "$id": "#/properties/age",
      "type": "number",
      "title": "The Age Schema",
      "multipleOf": 1,
      "minimum": 0,
      "widget": "input"
    },
    "documentType": {
      "$id": "#/properties/documentType",
      "type": "string",
      "title": "The Documenttype Schema",
      "pattern": "^(.*)$",
      "widget": "input"
    },
    "nps": {
      "$id": "#/properties/nps",
      "type": "number",
      "title": "The Nps Schema",
      "multipleOf": 1,
      "minimum": 0,
      "maximum": 10,
      "widget": "slider"
    },
    "enabled": {
      "$id": "#/properties/enabled",
      "type": "boolean",
      "title": "The Enabled Schema",
      "widget": "toggle"
    }
  }
}```