justmaier / angular-autofields-bootstrap Goto Github PK
View Code? Open in Web Editor NEWAutomatically generate fields from a schema object and bind them to an object
License: MIT License
Automatically generate fields from a schema object and bind them to an object
License: MIT License
Any plan on providing official TypeScript Interfaces?
IAutoFieldsField
IAutoFieldsOptions
IOthers...
Cheers,
Jon
The date
handler will add addons
property to field
, it will cause extra digest cycle because the schema
is watched deeply.
The simplest fix I can imagine is prefixing the property name with $
, Angular will ignore such property when doing dirty check.
I have two warnings in console:
uib-datepicker settings via uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead
angular.js:12722 uib-datepicker showWeeks attribute usage is deprecated, use datepicker-options attribute instead
This is because I use UI Bootstrap 1.2.1.
This should be corrected in the lines of code:
https://github.com/JustMaier/angular-autoFields-bootstrap/blob/master/autofields-bootstrap.js#L48
This correction is not a priority. But if not corrected it will not work in UI Bootstrap 1.3.
When there's no attr
property set or it doesn't include a required
property, the input gets a undefined
attribute appended to it.
It would be great to have a color picker similar to :
https://github.com/buberdds/angular-bootstrap-colorpicker
how can i use autoFields with translations? i'm using now pascalprecht.translate
.
for now i solve it in json:
property: 'password',
placeholder : $translate.instant('PASS'),
label : '',
type : 'password',
addons : [{icon : 'fa fa-lock'}],
attr: {
required: true,
ngMinlength:5 },
msgs: {
match: $translate.instant('PASSWORDSNOTMATCH')
},
and translation does not change on language change.
but my goal is to override defaultMsgs
with $autofieldsProvider.settings.validation
First, I love the library, it's saves me a ton of time :).
I'm using the ng-file-upload but I don't know where can I put the messages for the validation for the "max size" or "accepted files".
It uses <i ng-show="myForm.aa.$error.maxSize">File too large max 2M</i>
but the normal html won't work when I insert this tag in the $autofieldsProvider, this is my $autofieldsProvider code:
$autofieldsProvider.registerHandler('upload', function(directive, field, index) {
return '<label>' + field.label + '</label><input type="file" ngf-select ng-model="' + field.property + '" name="' + field.property + '" accept="' + field.accept + '" ngf-max-size="' + field.maxSize + '" ' + ((field.required) ? 'required' : '') + ' > <i ng-show="' + field.formName + '.' + field.property + '.$error.maxSize">File too large</i>';
});
Hi guys!
How do I replace a css class for a specific field?
I want to change the label color for a checkbox.
Thabk you!
Basic install using bower fails need to specify the master branch. The reason for the failure is the additional comma in the main array that was fixed in the master branch.
Install using: bower install angular-autoFields-bootstrap
Or update with: "angular-autoFields-bootstrap": "*" in json file
->Fails with EMALFORMED error in bower,json due to unexpected token ]
To get around this issue I updated from the master branch using:
bower install angular-autoFields-bootstrap#master
Thank you for your work, I like this library very much.
Angular2 has better performance than ng1. Do you have any plan to implement this library using angular2?
Thank you.
Seems that validation errors are supported only for Bootstrap. Maybe it should be added below the input on non-bootstrap themes?
Hi,
is it possible to add multiple select boxes and have the options inside the select box different each time (determined by what a user inputs via textboxes)?
I have this working but when I want to create more than 1 select box the values inside are always the same as each other. Because it uses the list: 'key as value for (key,value) in newDropbox'
Thanks
Is there an easy way to use ng-messages for validation notices?
thanks,
Scott
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library JustMaier/angular-autoFields-bootstrap
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "JustMaier/angular-autoFields-bootstrap",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
In autofields-bootstrap.js line 59 you use the old way of icons in bootstrap.
instead of 'icon-calendar' is should be:
'glyphicon glyphicon-calendar'.
ref to BS3 docs: http://getbootstrap.com/components/#glyphicons-how-to-use
I can fix this also if you wish.
Hi There, thanks for the wonderful library. One struggle I have a form, with a combo box, that upon selection shows and hides different fields in the form using ngShow
. However these "dynamic" fields do have validation, so hidden fields also have to be valid upon form submitting. Is there any way, I can dynamically alter the validation
option, and not just during build time?
Thanks.
Hi,
Please see demo page, when you click 'Toggle Horizontal', the issue happened.
Popovers show even if not really needed, e.g. "This field is valid".
How do I disable popovers for a specific input, or globally?
I'm working on an integration with Drupal and this lib (here).
When submitting I'm getting some validation errors from the server side.
How can I inject the values I see for example in Object.data.errors.body[0]
under the text field that caused the validation error?
Update: Chrome Version 54.0.2840.99 m
Hi,
Awesome library, thanks.
One issue that I'm having is that the validation tooltips are not placed correctly. This also happens on the demo page (http://justmaier.github.io/angular-autoFields-bootstrap/#demo). If I fill in the user name and then press the "Join" button, a tooltip pops up requesting me to fill in my gender. I expect the tooltip to be aligned with the bottom of the Gender input box, but it is somewhere in the middle of the Bio text area (see screenshot below).
I also have this problem with my own code and it prevents the use of the tooltips, which I really want.
Cheers,
Steven
I want to add ngClick
attribute to container so passed this to options
like this:
this.options = {
classes: {
container: ['form-group', 'form-field-container']
},
attributes: {
container: {
'ngClick': 'createForm.selectField($event)'
}
}
};
But it does not add ngClick
to the container it only adds custom classes.
I have also tried same with label but not working.
I am using version 2.2.2
from npm with angular 1.5.6
.
Hi, I´m trying to use https://github.com/leocaseiro/angular-chosen to integrate chosen to my form. In the schema I have added attr: {"required":true, "chosen":""}. The normal behaviour works fine but if the field is not filled with an option the validation the js consoe throws an error: "An invalid form control with name='pessoas_id' is not focusable". Seems that it is because chosen modify the DOM and removes some control from autoFields. Do you have any tip on how to solve this?
Hey, great library!
It would be nice to have the support for horizontal controls (http://getbootstrap.com/css/#forms-horizontal).
I poked around the source a little, and it seems as if each label+control pair needs a column class... the labels can have extra classes, but the control needs to be wrapped in a div
and that div
would need an extra class. I didn't see an obvious way to do it. What do you think?
Thank for you work!
Iv'e been able to implement multi tab & grouped sections providers, but having no luck with implementing a lookup using ui-select, I also wanted to add multi-select.
So far I have been unsuccessful in producing the desired result. Can you please point me in the right direction?
angular.module('autofields.lookup', ['autofields.bootstrap'])
.config(['$autofieldsProvider', function ($autofieldsProvider) {
// Checkbox Field Handler
$autofieldsProvider.registerHandler(['lookup'], function (directive, field, index) {
var defaultOption = (field.defaultOption ? field.defaultOption : directive.options.defaultOption);
//var inputHtml = '<select><option value="">' + defaultOption + '</option></select>';
var inputHtml = ''
+ '<ui-select theme="bootstrap">'
+ '<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>'
+ '<ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0">'
+ '<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>'
+ '</ui-select-choices>'
+ '</ui-select>';
var inputAttrs = {
ngOptions: field.list
};
var fieldElements = $autofieldsProvider.field(directive, field, inputHtml, inputAttrs);
return fieldElements.fieldContainer;
});
}]);
This is an example of the function in the controller to return a list of addresses:
$scope.address = {};
$scope.refreshAddresses = function (address) {
var params = { address: address, sensor: false };
return $http.get(
'http://maps.googleapis.com/maps/api/geocode/json',
{ params: params }
).then(function (response) {
$scope.addresses = response.data.results
});
};
Hello, when I add a ngShow attribute linked to a data property, it is not update when value changes. Example:
$scope.schema = [
{ property: 'Type', type: 'select', label: 'Types', list: 'c.Id as c.Name for c in types', attr: { required: true } },
{ property: 'TextHide', type: 'text', label: 'Text digital', attr: { required: false, ngShow: $scope.documentForm.Type == "value1" } },
];
Any help?
Thanks
Hi Thanks for the great module.
I had to tweak a little to set the timezone option for the datepicker
var inputAttrs = {
+ ngModelOptions:"{timezone: 'utc'}",
type:'text',
uibDatepickerPopup: datepickerPopup,
datepickerOptions: 'datepickerOptions',
isOpen: '$property_cleanOpen'
};
To autofields_bootstrap.js
from angular-ui/bootstrap#4837
Is there a better way to do it?
Will it be possible for you to provide code for the example shown @ "http://justmaier.github.io/angular-autoFields-bootstrap/#demo" with dependencies? I am unable to incorporate dependencies for autofields properly.
I tried to build some form with autofields.
However, I'm unable to get the option classes to work.
I created a fiddle to illustrate my problem:
https://jsfiddle.net/NBhn4/106/
Is it a bug with the classes or am I using it wrong?
Is it possible to achieve a multi column layout with this library?
hello
i have this error in ie8
is there a solution to make autofield work ?
Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 1.1.4322; InfoPath.1)
Horodateur : Fri, 20 Mar 2015 10:52:07 UTC
Message : [$injector:modulerr] http://errors.angularjs.org/1.2.27/$injector/modulerr?p0=backoffice&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.27%2F%24injector%2Fmodulerr%3Fp0%3Dautofields%26p1%3D%255B%2524injector%253Amodulerr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.27%252F%2524injector%252Fmodulerr%253Fp0%253Dautofields.bootstrap%2526p1%253D%25255B%252524injector%25253Amodulerr%25255D%252520http%25253A%25252F%25252Ferrors.angularjs.org%25252F1.2.27%25252F%252524injector%25252Fmodulerr%25253Fp0%25253Dautofields.standard%252526p1%25253DCet%25252520objet%25252520ne%25252520g%252525C3%252525A8re%25252520pas%25252520cette%25252520propri%252525C3%252525A9t%252525C3%252525A9%25252520ou%25252520cette%25252520m%252525C3%252525A9thode
Ligne : 33
Caractère : 477
Code : 0
URI : /modules/plugin/angular/angular-1.2.27/angular.min.js
Hi,
I'm getting some very strange behavior on mobiles with dropdown boxes. If there is more than one dropdown in my autofields on mobile touch the select box is opening twice. One over the top of each other. So the first selection a user makes closes the dropdown selection options but nothing is actually selected. Touch the select box again and it opens the selection options once, select the item and it shows selected in the dropdown.
I've tried to stop the issue by removing Bootstrap.js and only using angular-bootstrap.js but to no avail. It improved the issue so wasn't happening so often but its still there.
Does anyone have any thoughts on what could be causing this?
The logic uses field.placeholder
as condition, and setting it to an empty string evaluates to false
and then it uses field.label
or field.property
, but never an empty string.
Using MEAN.js after adding your modules to my bower.json and installing it, I required the file in my config/env/all.js under assets like all other third party modules.
'public/lib/angular-autoFields-bootstrap/autofields-bootstrap.js'
I added 'autofields' to my main app.module array. It obviously sees the file with the first line being
angular.module('autofields.bootstrap', ['autofields.standard','ui.bootstrap']) as this is what it errors on. Can you tell me what's going on here by the looks of it those deps are registered to autofields at the bottom of the autofields-boostrap.js file. I have other third party modules installed that are injected no problem.
Uncaught Error: [$injector:modulerr] Failed to instantiate module mainTesting due to:
Error: [$injector:modulerr] Failed to instantiate module autofields due to:
Error: [$injector:modulerr] Failed to instantiate module autofields.bootstrap due to:
Error: [$injector:modulerr] Failed to instantiate module autofields.standard due to:
Error: [$injector:nomod] Module 'autofields.standard' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
'public/lib/angular-autoFields-bootstrap/autofields.js'
the app loads with this an i'm still testing but I am using bootstrap, I was under the impression that I needed to be using the -boostrap version.
i am attempting to add timepicker as a optional field
Config:
// add time picker to autofields App.Module.config(['$autofieldsProvider', function ($autofieldsProvider) { // Checkbox Field Handler $autofieldsProvider.registerHandler('time', function (directive, field, index) { var fieldElements = $autofieldsProvider.field(directive, field, ''); return fieldElements.fieldContainer; }); }]);
Schema:
formSchema = [ { property: 'ClockTime', label: 'Time', type: 'time', attr: { required: true } }, ];
This works fine if the data bound to the field is a string in the form 'hh:mmtt'. But, I would like to bind a date object and use an angular filter to convert to the correct input for the timepicker. (eg...'12/03/2014 23:07' => '11:07PM')
My questions is, 1- is this the right direction, 2- if so, how do i pass a filter to be used?
Thanks for your time. The code is quite helpful.
Many form fields require some sort of description, instruction, explanation or rule.
Currently, as far as I can tell, this is not supported in any way.
An easy start with tackling this requirement is adding the option to specify a placeholder text - this way one could choose to put field name in the label and the description in the placeholder, or vice-versa. This will help only with text and textarea inputs, though.
Hi, if it is possible, do you have any sample of an integration of Breeze entities and validations with AutoFields?
Thanks
The first thank you for great job!
Question:
Is it possible to change code to get ability to have icons (valid, invalid, warning) like described here:
http://getbootstrap.com/css/#forms-control-validation ?
I'm planning to use autoFields for my admin-backend and CRUD funktionality.
I have objects with subobjects such as Person1, Person2 and Address.
I would like to specify this in the schema and get a Person1 header and a styled group round all properties for Person1 to differ it from Person2 and so on.
Something like multiple, but be able to set a header and a class of the surrounding div.
Hello,
I'm using chrome 39.0.2171.71 and when I try to use a date input ie:
$scope.schema2 = [{property: 'date_debut', label: 'Date début', type: 'date', attr: {required: true}}]
I get the following error : TypeError: Cannot read property 'replace' of undefined
Which results in an unusable datepicker.
I'm using bootstrap UI.
Please note that the same bug is reproductible with the demo page of this project : http://justmaier.github.io/angular-autoFields-bootstrap/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation#demo
Thank you for your help.
I have a field to enter a password a second time which is required and has some min-length on it and a custom directive that validates if its equal to the previous password field.
When i start typing both min-length and my directive become invalid and they both change their respective error to true. This triggers a popover that shows both error messages. This makes for a very ugly popup
Is it possible to block a second, third, etc error as soon as there was already a first error triggered. So the popover will always just show one error.
I'd like to add attr: { ngShow: "condition" } to multiple field for show/hide whole row and I can't.
I've done the following changes in my local files:
autofields-bootstrap.js:
$autofieldsProvider.registerHandler('multiple', function(directive, field, index){
var row = angular.element('<div/>');
row.addClass(directive.options.classes.row.join(' '));
+ $autofieldsProvider.setAttributes(directive, field, row, field.attr);
autofields.js:
value = value
.replace(/\$form/g, directive.formStr)
.replace(/\$schema/g, directive.schemaStr)
- .replace(/\$type/g, field.type || 'text')
- .replace(/\$property_clean/g, field.property.replace(/\[|\]|\./g, ''))
- .replace(/\$property/g, field.property)
- .replace(/\$data/g, directive.dataStr)
- .replace(/\$placeholder/g, field.placeholder != null ? field.placeholder : helper.LabelText(field));
+ .replace(/\$data/g, directive.dataStr)
+ .replace(/\$type/g, field.type || 'text');
+ if (field.property != null) {
+ value = value
+ .replace(/\$property_clean/g, field.property.replace(/\[|\]|\./g, ''))
+ .replace(/\$property/g, field.property);
+ }
+ if (field.placeholder != null || field.label != null || field.property != null) {
+ value = value
+ .replace(/\$placeholder/g, field.placeholder != null ? field.placeholder : helper.LabelText(field));
+ }
It would be nice to have something like this worked from the box.
I updated to the latest version 2.1.7 with ui-bootstrap 0.12.0 and I can't get styling to work:
Loginjs:
$scope.options = {
validation: {
enabled: true
},
layout: {
type: 'basic',
labelSize: 3,
inputSize: 9
}
};
Please help! Thank you. Awesome package btw.
Would it be possible for me to enable/disable any validation checking in a field ?
example:
I have some fields being enabled/disabled with a checkbox
if they are disabled i dont want to see any validation happening (no green/red color )
Hi, I've started using this module today.
Hope I'm not mistaken, but I think inputs of type 'url' which fail validation don't have any way to control the displayed validation message content. It seems like it just fails the field (colors it red) but no message is shown.
I've tried to add: msgs: { url: 'Test' }
to my schema, but it doesn't seem to work.
Am I missing something?
I'm building a CRUD with autofields, but Chrome always populate the "userName" and "password" with the auto fill values, this is my code:
if (id) {
$http.get('/api/users/'+id).then(function(resp) {
$scope.formModel = resp;
});
} else {
$scope.formModel = {
firstName: '',
lastName: '',
userName: '',
password: ''
};
};
$scope.schema = [{
type: 'multiple',
fields: [{
property: 'firstName',
label: 'First Name',
type: 'text',
columns: 6
}, {
property: 'lastName',
label: 'Last Name',
type: 'text',
columns: 6
}]
}, {
type: 'multiple',
fields: [{
property: 'userName',
label: 'User Name',
type: 'text',
columns: 6
}, {
property: 'password',
label: 'Password',
type: 'password',
columns: 6
}]
}];
$scope.options = {
validation: {
enabled: true,
showMessages: false
},
layout: {
type: 'basic',
labelSize: 3,
inputSize: 9
}
};
The way the data is displayed is with ui-bootrstrap with modals, the second time when the modal is called the data from $scope.formModel is not displayed.
Bravo!!!!
This is the most clever and advanced piece of code i found on the internet for easy form development based on schema metadata. Well done!!!
i have an issue on multiple as
schema: [
{ property: 'Id', type: 'text', attr: { required: true }, columns: 2, addons: [{ icon: "fa fa-users" }] },
{ property: 'OrderDate', type: 'date', attr: { required: true } },
{ property: 'OrderNumber', type: 'text' },
{
type: 'multiple',
columns:4,
fields: [
{ property: 'NumberOfItems', type: 'text' },
{ property: 'CustomerId', type: 'select', list: 'item.Id as item.LastName + " " + item.FirstName for item in vm.extra.customers', attr: { required: true } }
]
}
]
You algorithm must be recursive.
When a field is "mutliple" i suggest to have a label as all the other fields so it occupies space (on the left or top) and for the actual control you just re-run the algorithm for the 'fields' properrty (because a "multiple" field has fields)
This way you can create unlimited nested form structure perfectly aligned!
More over you can introduce a new field of type "content" where the user can specify HTML markup in case he wants some complete custom special control.
P.S Please can you explain further the colOffset, col e.t.c classes used as options?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.