8

In my angular project I need to create some forms dynamically. I did some googling for this and found a module angular-schema-form. It seems this is exactly what I want, but the problem is I do not understand how to keep schema and form. What is the relation between schema and form?

I read the documentation from form types but it is not very helpful to me. I don't want to use this module like HIT and TRY. I first want to understand the concept: what is the relation between schema and form?

Nathan Tuggy
  • 2,237
  • 27
  • 30
  • 38
Bharat Bhushan
  • 2,077
  • 2
  • 21
  • 34
  • your question is unclear. Are you unsure what JSON-Schema (the format that the module you are asking about) is? http://json-schema.org/. – Claies May 05 '15 at 03:48
  • some code snippet from angular-schema-form github page. `var schema = { "type": "object", "properties": { "surname": { "type": "string" }, "firstname": { "type": "string" }, } } // for form [ "firstname", "surname" ]` Here array is for form and object is for schema. They are using some convention for rendering the html. like type string or text for input box, what if I want to use as label, another option is template instead of text, here i don't how to bind this template html with model value. [1/2] – Bharat Bhushan May 05 '15 at 03:57
  • [see here] (https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md#overriding-field-types-and-order) [2/2] – Bharat Bhushan May 05 '15 at 03:58
  • Your question is answered in the specifications for JSON-Schema. – Claies May 05 '15 at 04:07
  • 1
    It sounds like, from the question and the comments, that you are having trouble understanding the documentation. You will have much better luck getting a reasonable answer if you are able to try some things and ask a question about a specific piece of the documentation that is confusing to you. Rewriting the documentation from another source here is rarely helpful. – Claies May 05 '15 at 04:13
  • Ok I will explore more and try to understand the concept. – Bharat Bhushan May 05 '15 at 04:33

2 Answers2

11

To try to address the basic question:

What is the relation between schema and form?

To put things into simple terms, perhaps it is easiest to think of it like this. To create the form, you have three pieces of JSON:

  • The JSON containing the actual data being presented through your form. This is the model.

  • The JSON schema. This describes the structure of the model. To give an extremely simple example of the relationship between model and schema, imagine your actual data (your model) describes a person in terms of their sex and age, such as {sex: female, age: 32}. The role of the schema is to describe the structure of the model, so in this case it would describe that there should be a sex property of string type whose values can only be male or female, and that there is an age property, and so on. To be able to present a form that is populated using your model data, it simply has to have a schema to construct the form in the first place.

  • The JSON form is something that I think of as being optional. You must have it, but it can simply contain "*", which tells angular-schema-form to just build the form automatically based on the schema. In this case, the library will build the form based entirely on the schema and using default settings as described in the documentation. But what you can do, if you want to, is use the form object to describe how you want your form to be structured.

Here's a very crude and very simple example of the flexibility the form object gives you:

Taking the person object example above, if you don't make use of the form object (i.e. it just contains "*") then angular-schema-form will build you a form based on the schema. It would therefore have input fields for sex and age. Those fields may, or may not, be in the format, or order, or have other properties that you want. You may then optionally use the form object to instruct angular-schema-form how you want it to construct the form. For instance, you could use the form to make it so that the form only contains a field for age but not sex.

So the model is your data, and the schema describes the structure of that data. In simplistic terms, the form provides a further layer of mapping and configuration to your form, overriding the default form that would be created based on the schema alone.

Does that help?

Trevor
  • 10,903
  • 5
  • 61
  • 84
  • yes this is very helpful for me as you have cleared my doubt that form is just an optional layer. I was guessing the same but not sure on my guess. I explored the same and find the properties in schema object are the keys in form array, and form array is just for overriding the default type. Today whole the day I did google on this and found the solution what I want. code snippet [1/2] – Bharat Bhushan May 05 '15 at 12:40
  • [2/2]
    ` $scope.schema = { type: "object", properties: { name: { type:"string"} } }; $scope.form = [ { type: "template", template: '

    Yo {{model.name}}!

    ', foo: function() { console.log('oh noes!'); } }, { type:"text", key:"name" } ]; $scope.model = {name:"this is for test"}; ' we can also bind the template with model this is what I want.
    – Bharat Bhushan May 05 '15 at 12:42
0

I had your same question and also like you nobody was able to simply understand my concern. I'm not a AngualrJS guru nor a JSON one so I had many difficulties to understand the manual and I found the examples confusing too (for a noob like me).

So after many try and errors this is what I understood:

The form is what the structure the <FORM> will have when rendered.

The schema is the data structure defined rigorously by this link: https://json-schema.org/understanding-json-schema/about.html

It have many similarity with the old XML schema dtd. When you define a schema it will define how the data will be presented on the model. So if you define the schema like this

{
        "type" : "object",
        "properties" : {
            "contact" : {
                "title" : "$Contact",
                "type" : "number"
            }
        }
    }

the model will present the Contact like a numeric value. If you put type as string you will have a model presented in a string format and so on.

velteyn
  • 313
  • 3
  • 7
  • 22