justmaier / angular-autofields-bootstrap Goto Github PK

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.

Hi, if it is possible, do you have any sample of an integration of Breeze entities and validations with AutoFields?
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?

I have this error in Console: Syntax error, unrecognized expression: unsupported pseudo: fields.

But the app runs fine.

Thanks.

``

It would be great to have a color picker similar to :
https://github.com/buberdds/angular-bootstrap-colorpicker

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?

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 } }
                    ]
                }
            ]

and the result is

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?

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.

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

I updated to the latest version 2.1.7 with ui-bootstrap 0.12.0 and I can't get styling to work:

js:
$scope.options = {
validation: {
enabled: true
},
layout: {
type: 'basic',
labelSize: 3,
inputSize: 9
}
};

Please help! Thank you. Awesome package btw.

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.

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 wonder this is possible with autoFields. I hope I make myself clear. THe blue line is the path for input when using TAB next field

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.

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.

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?

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

When there's no attr property set or it doesn't include a required property, the input gets a undefined attribute appended to it.

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?

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

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

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'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.

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.

Popovers show even if not really needed, e.g. "This field is valid".

How do I disable popovers for a specific input, or globally?

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.

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 )

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.

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.

Any plan on providing official TypeScript Interfaces?
IAutoFieldsField
IAutoFieldsOptions
IOthers...

Cheers,
Jon

Seems that validation errors are supported only for Bootstrap. Maybe it should be added below the input on non-bootstrap themes?

Hi,

Please see demo page, when you click 'Toggle Horizontal', the issue happened.

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>';
});

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

Is it possible to achieve a multi column layout with this library?

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?

Hey, maintainer(s) of JustMaier/angular-autoFields-bootstrap!

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!

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.

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?

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

Is there an easy way to use ng-messages for validation notices?

thanks,
Scott

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!

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?

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.

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.

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

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.

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.