Skip to content
This repository has been archived by the owner on Sep 2, 2022. It is now read-only.

Example now includes number, integer & email fields #4

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Example now includes number, integer & email fields #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@ So far, we support the following json schema types:
* string
* boolean
* enum
* email
* integer
* required
* number
* required
* pattern

We aim to eventually support:
Expand Down
1 change: 1 addition & 0 deletions app/js/schemaFormField.js.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ angular.module("schemaForm").directive "schemaFormField", ($compile, $templateCa
template = $templateCache.get("enumField.html") if scope.schema.enum?
element.html template
element.find("input").attr("type", "number") if (scope.schema.type == "number" or scope.schema.type == "integer")
element.find("input").attr("type", "email") if scope.schema.type == "email"
element.find("input").attr("ng-required", scope.required)
element.find("input").attr("ng-pattern", "/#{scope.schema.pattern}/") if scope.schema.pattern
element.find("input").attr("name", scope.field)
Expand Down
4 changes: 4 additions & 0 deletions app/templates/emailField.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="form-group" ng-class="{'has-error': formState[field].$invalid}">
<label for="{{field}}" class="control-label">{{schema.title}}</label>
<input id="{{field}}" ng-attr-name="{{field}}" ng-model="model[field]" type="email" class="form-control"></input>
</div>
7 changes: 1 addition & 6 deletions config/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,12 @@ module.exports = function(lineman) {
var app = lineman.config.application;
return {

concat: {
uncompressedDist: {
src: app.concat.uncompressedDist.src.concat("<%= files.ngtemplates.dest %>")
}
},
ngtemplates: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reasoning for wanting to take out ngtemplates?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took it out because lineman was complaining "uncompressedDist" (see config/lib.json to config/application.json). Else it was throwing an error. But I have to admit, I have no idea what it does.

I wasn't sure if you added it or if lineman generates it. In brand new lineman app, there is no mention of this.

options: {
module: "schemaForm"
}
},

appendTasks: {
dev: app.appendTasks.dev.concat("server")
}
Expand Down
8 changes: 8 additions & 0 deletions config/application.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"plugins": {
"lib": {
"includeVendorInDistribution": false,
"generateBowerJson": true
}
}
}
4 changes: 0 additions & 4 deletions config/lib.json
View file
Open in desktop

This file was deleted.

53 changes: 17 additions & 36 deletions dist/schema-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,28 @@
editAs: "@"
},
link: function(scope, element, attrs, formController) {
var template;
var template, typeTemplates;
typeTemplates = {
bool: 'boolean',
boolean: 'boolean',
email: 'email',
"enum": 'enum',
integer: 'string',
number: 'string',
string: 'string'
};
scope.formState = formController;
template = scope.schema["enum"] != null ? $templateCache.get("enumField.html") : $templateCache.get("" + scope.schema.type + "Field.html");
template = $templateCache.get("" + typeTemplates[scope.schema.type] + "Field.html");
if (scope.schema["enum"] != null) {
template = $templateCache.get("enumField.html");
}
element.html(template);
if (scope.schema.type === "number" || scope.schema.type === "integer") {
element.find("input").attr("type", "number");
}
if (scope.schema.type === "email") {
element.find("input").attr("type", "email");
}
element.find("input").attr("ng-required", scope.required);
if (scope.schema.pattern) {
element.find("input").attr("ng-pattern", "/" + scope.schema.pattern + "/");
Expand Down Expand Up @@ -59,37 +74,3 @@
});

}).call(this);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the intent here is to have dist be the bower component. That's why the templates are compiled into this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bear with me I'm not super confident here.

I did 2 things:

  • Added emailField template
  • Changing input type attribute to email if email field

Both do the same things, however I could not get the example working without emailField template. Maybe I'm missing something though.


angular.module("schemaForm").run(["$templateCache", function($templateCache) {

$templateCache.put("booleanField.html",
"<div class=\"form-group\">\n" +
" <label for=\"{{field}}\">{{schema.title}}</label>\n" +
" <input id=\"{{field}}\" name=\"field\" ng-model=\"model[field]\" type=\"checkbox\"></input>\n" +
"</div>\n"
);

$templateCache.put("enumField.html",
"<div class=\"form-group\">\n" +
" <label for=\"{{field}}\">{{schema.title}}</label>\n" +
" <select id=\"{{field}}\" name=\"{{field}}\" ng-model=\"model[field]\" ng-options=\"enumValue for enumValue in schema.enum\"></select>\n" +
"</div>\n"
);

$templateCache.put("schemaFormFields.html",
"<div ng-repeat=\"field in fields\">\n" +
" <schema-form-field field=\"field\"\n" +
" schema=\"schema.properties[field]\"\n" +
" model=\"model\" required=\"required(field)\">\n" +
" </schema-form-field>\n" +
"</div>\n"
);

$templateCache.put("stringField.html",
"<div class=\"form-group\" ng-class=\"{'has-error': formState[field].$invalid}\">\n" +
" <label for=\"{{field}}\" class=\"control-label\">{{schema.title}}</label>\n" +
" <input id=\"{{field}}\" ng-attr-name=\"{{field}}\" ng-model=\"model[field]\" type=\"text\" class=\"form-control\"></input>\n" +
"</div>\n"
);

}]);
2 changes: 1 addition & 1 deletion dist/schema-form.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 15 additions & 3 deletions example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ var app = angular.module("app", ["schemaForm"]);
app.controller("ExampleCtrl", function($scope) {
$scope.schema =
{
title: "Thing"
title: "Thing",
type: "object",
properties: {
title: {
Expand All @@ -16,14 +16,26 @@ app.controller("ExampleCtrl", function($scope) {
title: "Good?"
},
level: {
title: "Level",
type: "string",
title: "Level",
enum: ["low", "medium", "high"]
},
number: {
type: "number",
title: "What's your lucky number?",
},
integer: {
type: "integer",
title: "Integer too"
},
user_email: {
type: "email",
title: "Email por favor"
}
},
required: ["title"]
}
$scope.fields = ["title", "level", "good"]
$scope.fields = ["title", "level", "good", "number", "integer", "user_email"]
$scope.model = {
title: "Uncle John's Bathroom Reader",
good: false
Expand Down