[AngularJS] angular-schema-form -- 1

Check out on gitHub, see the example on Demo page, see the document, extension.

 

Mainly, there are three parts consist of Javascript part:

form,  schema  and model.

 

Schema : 

---

 

I like define the schema first. Usually you will use two props:

type, properties & required.

{
  "type": "object",
  "title": "Somehting ele",
  "properties": {
    "email": {
      "title": "Email",
      "type": "string",
      "pattern": "^\\S+@\\S+$",
      "description": "Email will be used for evil."
    }
  },
  "required": [
    "email"
  ]
}

 

In 'properties', is the place where you define the form elements. For example - "email".

 

Form: 

---

 

Then in the form, if you thing the schema setting is ok, then in form:

[
   "email"   
]

 

Also you can overwrite the form: for example,  I want to over the title, add a placeholder.

{
      "key": "email",
      "type": "string",
      "title": "Email filed",
      "placeholder": "Email"
  }

"key" in the example matchs to the "email" in the shcema.

 

A good example for input field:

Schema:

"email": {
      "title": "Email",
      "type": "string",
      "pattern": "^\\S+@\\S+$",
      "maxlength": 120,
      "minlength": 3,
      "validationMessage": "This is not an email"
      "description": "Email will be used for evil."
    }

Form:

  {
      "key": "email",
      "type": "string",
      "title": "Email filed",
      "placeholder": "Email"
  }

 

 

Standard Options for form:

{
  key: "address.street",      // The dot notatin to the attribute on the model
  type: "text",               // Type of field
  title: "Street",            // Title of field, taken from schema if available
  notitle: false,             // Set to true to hide title
  description: "Street name", // A description, taken from schema if available, can be HTML
  validationMessage: "Oh noes, please write a proper address",  // A custom validation error message
  onChange: "valueChanged(form.key,modelValue)", // onChange event handler, expression or function
  feedback: false,             // Inline feedback icons
  placeholder: "Input...",     // placeholder on inputs and textarea
  ngModelOptions: { ... },     // Passed along to ng-model-options
  readonly: true,              // Same effect as readOnly in schema. Put on a fieldset or array
                               // and their items will inherit it.
  htmlClass: "street foobar",  // CSS Class(es) to be added to the container div
  fieldHtmlClass: "street"     // CSS Class(es) to be added to field input (or similar)
}