AngularJS dynamic forms, how to place schema component at required location in html

Question

AngularJS dynamic forms, how to place schema component at required location in html

1.6k views Asked by Prasad Parab At 10 June 2015 at 05:40

I have created following schema using angular schemaform. But i want name to go in div1 and age to go in div2. Please help me out how to do this.

$scope.schema = {
            type: "object",
            properties: {
                "name": {
                    "type": "string",
                    "title": "Name",
                    "required": true
                },
            
            
                "age": {
                    "type": "number",
                    "title": "Age"
                }
            }
               
          };
            
          $scope.form = [
            "*",
            {
              type: "submit",
              title: "Save"
            }
          ];

<div id="div1"></div>
<div id="div2"></div>

Original Q&A

There are 4 answers

jojo On 10 June 2015 at 06:01

Play with this Plunker snippet: http://plnkr.co/edit/mpZrVO?p=preview

The key line is here in the <body> tag of index.html: <form sf-schema="schema" sf-form="form" sf-model="model"></form>. It's best to style each schema/form as one whole to keep UI consistent, instead of two divs.

Make sure to include the correct dependencies in your module.

Here is what the app.js looks like:

var app = angular.module('plunker', ['ngSanitize', 'schemaForm']);
app.controller('MainCtrl', function($scope) {
  $scope.schema = {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name",
        "required": true
      },
      "age": {
        "type": "number",
        "title": "Age"
      }
    }

  };

  $scope.form = [
    "*", {
      type: "submit",
      title: "save"
    }
  ];

  $scope.model = {};
});

newstackoverflowuser5555 On 10 June 2015 at 05:46

You can change the order of display using $scope.form options

$scope.form = [{
        key : 'age'
    },
    {
        key : 'name'
    },
    {
        type : "submit",
        title : "Save"
    }];

I hope, this will resolve your problem

Shubham Nigam On 10 June 2015 at 05:48

According to me you want to do like this

<div ng-repeat="value in schema.properties">
<div id="1">
<input type="text" placeholder="{{value.name.title}}" />
</div>
<div id="2">
<input type="Number" value='{{value.age.type}}'/>
</div>
</div>

**Dervisevic** · Accepted Answer · 2015-06-11 06:32:02

I'm one of the guys working on the ASF project. There are 3 ways to go here.

As people have mentioned above, one way to go is making custom templates (or decorators as we call them).
The second is using the experimental feature manual field insertion. (Could work well)
Third way is a bit more hackish but quick to do. That is to run several instances of ASF with the same schema and model but split the form definition.

JS (simplified):

  $scope.schema = {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name",
        "required": true
      },
      "age": {
        "type": "number",
        "title": "Age"
      }
    }

  };

  $scope.formOne = [
    "name"
  ];

  $scope.formTwo = [
    "age"
  ];

  $scope.model = {};

And the html would be something like this:

<div id="div1">
  <form sf-schema="schema" sf-form="formOne" sf-model="model"></form>
</div>
<div id="div2">
  <form sf-schema="schema" sf-form="formTwo" sf-model="model"></form>
</div>

TechQA.

AngularJS dynamic forms, how to place schema component at required location in html

There are 4 answers

Related Questions in ANGULARJS

Related Questions in ANGULAR-SCHEMA-FORM

Popular Questions

Popular Tags

Trending Questions