Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
angular-schema-form
Advanced tools
Generate forms from JSON schemas using AngularJS!
First, as there has been a rather intensive period of planning and change for this project, there have been important new developments for the project. Lets get into those first(the normal front page continues below):
A standard, json-schema-form, is being created.
The concept of combining data, JSON Schema and a form definition, is something that isn't just usable in a JavaScript Angular web application, but in any framework, on any platform. Current ports are angular-schema-form and react-schema-form, but delphi-schema-form and laravel-schema-form are planned as well. To make these ports easier to do, and for everything to work in harmony, a common ground has to be established, a standard.
After a phase of planning, the following list of projects has been decided upon: https://github.com/json-schema-form/json-schema-form/wiki/Current-projects
The next major release of ASF will be 1.0.
The goal for that version is to include the breaking changes that is needed for future developments, like *Of and local $refs:
The reason for the core break out is for all javascript-based ports of the json-schema-form concept to be able to share the same central code base. Work in that direction is being done in the json-schema-form-core repository.
There is now a UI for building schemas and forms being developed at json-schema-builder repository.
Ralphael Owino (main author), has a demo up already.
This is now a repository with template schemas and forms. So far all the schema.org types has been converted to JSON schema approximations, and also some has been further resolved and had (huge) forms generated. Schema.org is big.
The documentation is evolving, and it is happening mostly on the wiki:
These are just started.
medium.com/@SchemaFormIO / schemaform.io / @SchemaFormIO / Movie
If you use ASF in your project/company please let us know! We'd love to feature you on the site.
Try out the example page. Try editing the schema or form definition and see what comes out!
Hint: By pressing the 'Save to gist' button (top left), you can save your example into a shareable link.
Schema Form is a set of AngularJS directives (and a couple of services). It can do two things to make life easier:
Schema Form uses convention over configuration, so it comes packaged with some sensible defaults. But you can always customize it by changing the order and types of form fields.
Schema Form is inspired by the nice JSON Form library and aims to be roughly compatible with it, especially its form definition. So what sets Schema Form apart from JSON Form?
You can find all documentation here, it covers all the different field types and their options.
It also covers how to extend angular schema form with your own field types.
First, expose your schema, form, and model to the $scope.
angular.module('myModule', ['schemaForm'])
.controller('FormController', function($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
});
Then load them into Schema Form using the sfSchema
, sfForm
, and sfModel
directives.
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
It's simplest to install Schema Form using Bower.
bower install angular-schema-form
This will install the latest release and basic dependencies. See dependecies section below.
You can also load the files via cdnjs.com.
You can also just download the contents of the dist/
folder and add dependencies manually.
Schema form has a lot of dependencies, most of which are optional. Schema Form depends on:
If you install via bower you get all of the above except bootstrap since we don't want to push a certain version or flavor on you. Also make sure you got the angular version you actually want.
tabarray
. Tab arrays default to tabs on the left side. For these to work, you'll need to include the CSS from bootstrap-vertical-tabs. However, you won't need Bootstrap Vertical Tabs for horizontal tabs (the tabType: "top"
option).The minified files include templates - no need to load additional HTML files.
Schema form is split into two main files, dist/schema-form.min.js
and
dist/boostrap-decorator.min.js
and they need be loaded in that order. AngularJS,
tv4 and objectpath
also needs to be loaded before Schema Form.
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
Don't forget to load the schemaForm
module or nothing will happen.
angular.module('myModule', ['schemaForm']);
There are several add-ons available, for a full list see the web page. Your can also create your own add-ons!
Contributions are welcome! Please see Contributing.md for more info.
The files in the dist/
folder, plus dependencies, are all you need to use Schema Form. But if
you'd like to build it yourself, we use gulp.
First off, you need to have nodejs installed. Then install all dev dependencies of the project with npm, install gulp and run the default task.
$ npm install
$ sudo npm install -g gulp
$ bower install
$ gulp
The default task uses gulp-angular-templatecache to compile all html templates to js and then concatenates and minifies them with the rest of the sources.
You can also run gulp watch
to have it rebuild on change.
Unit tests are run with karma and written using mocha, chai and sinon
To run the tests:
$ npm install
$ bower install
$ sudo npm install -g karma-cli
$ karma start karma.conf.js
FAQs
Create complex forms from a JSON schema with angular.
We found that angular-schema-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.