Clever Geek Handbook

AngularJS dynamic forms, how to place schema component in the right place in html

I have created the following schema using angular schemaform. But I want the name to go to div1 and the age to go to div2. Please help me 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>
Run codeHide result


+3


source to share


4 answers


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

  • As mentioned above, one way is to create custom templates (or decorators, as we call them).

  • The second uses the experimental feature to insert a field manually. (may work well)

  • The third way is a little more hackish, but fast. That is, launch multiple 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 will 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>
+2


source


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

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


Hope this solves your problem.

0


source


According to me, you want to do 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>
0


source


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

The key line here is the tag <body>

index.html

: <form sf-schema="schema" sf-form="form" sf-model="model"></form>

. Your best bet is to style each outline / shape as one unit to maintain a consistent interface rather than two divs.

Make sure to include the correct dependencies in your module.

This is what looks like app.js

:

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 = {};
});
0


source






More articles:


All Articles