formly-js / angular-formly-templates-bootstrap Goto Github PK
View Code? Open in Web Editor NEWAngular-Formly: Bootstrap Templates
Home Page: http://formly-js.github.io/angular-formly
License: MIT License
Angular-Formly: Bootstrap Templates
Home Page: http://formly-js.github.io/angular-formly
License: MIT License
when sr-only is a class on the label, the label will hide for
non-screen-reader clients
I've made a feature branch to do this at https://github.com/shanemgrey/angular-formly-templates-bootstrap/tree/feature/sr-only
accepts an optional templateOption of labelSrOnly, which, if true, hides the label for
non-screen-reader clients
Only changes 2 lines of code (3 if you count the additional comma ;-)
Can you review my branch and let me know if you want a PR?
Having a description property in templateOption causes all but the root object to be discarded. This breaks valid HTML form elements like a datalist which has both an input and a datalist component.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
First: I'm not sure if this is specific to this template library or if it's something that should be addressed in the main Formly repo. If you'd like me to migrate this issue to the main repo, please let me know.
Here's a JS Bin showing the issue: http://jsbin.com/naqaqaguma/2/edit
As you can see, my "input" type field received a formControl
object and the errorExistsAndShouldBeVisible
key in validation
. The other two, however, did not.
Through the excessive use of debugger statements, I believe I've located the problem in the watchFormControl
function in formly-field.js. Specifically, the function exits early due to lines 196-199 because Formly can't locate the ng-model
attribute in the element. This prevents Formly from adding the watchFieldExistence
and addShowMessageWatcher
watchers, which set formControl
and errorExistsAndShouldBeVisible
, respectively.
By examining the element at this point in the execution, it appears that the actual inputs have not yet populated via ng-repeat
, so there is no ng-model
for Formly to find.
I'm at a bit of a loss with regards to a solution because it seems like it's a timing issue with directive compilation. Perhaps the directive could be compiled prior to Formly starting its watches?
Thank you so much for working on this project, it's truly awesome and saves me a lot of time. Keep up the good work.
I can't get the description from the templateOptions on radio input to show up. Works fine on all other input types though. Here's an example: http://jsbin.com/tayucopahu/2/edit?js,output (I just extended one of your examples).
I guess I could make a PR but someone has to point me in the right direction as I'm not that js savvy :). Here's a screenshot of a checkbox- and radio list that both have a description in their templateOptions:
Thanks Jake! :-)
When I run npm run start
I get the following error. As far as I can tell ./run/index.test
isn't in the repo.
ERROR in ./src/index.test.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./run/index.test in /Users/grant/Git/angular-formly-templates-bootstrap/src
@ ./src/index.test.js 10:0-27
webpack: bundle is now VALID.
Chrome 41.0.2272 (Mac OS X 10.10.3) ERROR
Uncaught TypeError: undefined is not a function
at /Users/grant/Git/angular-formly-templates-bootstrap/src/index.test.js:79
With npm3, peerDependencies
will not be auto installed unless they are also in your dependencies.
https://github.com/formly-js/angular-formly-templates-bootstrap/blob/master/package.json#L35
Angular formly is really powerfull for its infinite possibilities.
I'm developing a form generator and all works well until the the time I want to save to database.
Let me explain the context (might be useful later) :
formly bootstrap template
.1 per row
up to 3 per row
(just followed well documented advanced layout : it works with no problem).at each step
of the form design, user can preview
what current result looks like (it is nothing to implement but gives a lot of comfort to user).at final step
, when user selected all desired fields/controls and finished to customize them (i.e. : is it required, description, options ....),
My problem is located in the final step (all steps before are all ok)
save fields model
into mongoDB
database.NodeJS
application and I use mongoose
to query my mongoDB database.JSON.stringified
my formly field model.converting circular structure to JSON at Object.stringify (native...
*My question : *
Is there a nice way to save firmly model (data model will be easier) into mongoDB through mongoose.
It may be able to save simple to advanced layout fields model.
Thank you in advanced and thank you for this really useful formly.
Great work! Any reason file inputs are left out?
Can submit a PR, but the guidelines suggested asking a Q about direction first.
Hi, I really like this lib thanks, but can I make an inline form with it if so how I couldn't find anything about it in the docs, or should I use custom templates for this.
thanks in advance.
I get an injection error when I attempt to use formly bootstrap. The error is simply a broken link. Decoding the url, I get the message:
formlyConfig.setWrapper apiCheck failed! Argument value must be object
Working with multiCheckbox
I found an issue. As demonstrated in this jsbin. In the first case, I predefine checkbox values in options array, and then I simulate async population of the values and in the UI we can see checked checkbox. In the second case I simulate async loading of the checkbox values and when I populate values, the checkbox is not checked.
How would I make the form horizontal? http://getbootstrap.com/css/#forms-horizontal
I have tried to add nested input field within fieldGroup. Unfortunately it is not working :( . I also have tried to attach watcher, that is not working either.
My fields are like
{
className: 'row',
fieldGroup:[
{
className: 'col-md-6',
type: 'input',
model: $scope.place.location,
key: 'lat',
templateOptions:
{
label: 'Latitude',
},
watcher: {
listener: function(field, newValue, oldValue, scope, stopWatching) {
if(newValue) {
console.log('Default Expression: ' + newValue);
}
}
}
},
{
className: 'col-md-6',
type: 'input',
model: $scope.place.location,
key: 'lon',
templateOptions:
{
label: 'Longitude'
}
}
]
}
How I can achieve nested input field?
Bootstrap offers nice add-ons that can be added to input fields. It would be nice to be able to use them through bootstrap templates. I already made a bit of work in that direction, if that is of interest, I could make a pull request and integrate this in the distribution.
Not sure is it a bug, but if field is required and label is not set then we still have
<label for="formly_1_input_email_0" class="control-label ng-binding">*</label>
http://www.awesomescreenshot.com/image/383232/ee664a49a14e97762bfaddaccbb6552a
http://angular-formly.com/#/example/other/toggle-required
{
key: 'text',
type: 'input',
templateOptions: {
//label: 'Moehahah',
placeholder: 'Formly is terrific!'
},
validation: {
show: true
},
expressionProperties: {
'templateOptions.required': 'model.checked'
}
}
I discovered that "maxlength" is supported by watching one of the videos... it would be good if it were documented on the readme, like the other templateOptions are.
When setting required: true
in the templateOptions of a multiCheckbox, the form isn't considered valid until all checkboxes are checked. In my opion, the form should be considered valid when at least one the checkboxes are checked.
See an example on jbin here: http://jsbin.com/poxicexafa/2/edit?html,js,output
As in topic
I was thinking of adding more one-way bindings to reduce watchers and increase template performance. Most templateOptions
would benefit.
But quick sanity check: are there any use cases where an id
or key
would require a two-way binding?
<div class="checkbox">
<label>
<input type="checkbox"
class="formly-field-checkbox"
id="{{::id}}"
formly-dynamic-name="::id"
formly-custom-validation="options.validators"
aria-describedby="{{::id}}_description"
ng-required="::options.templateOptions.required"
ng-disabled="::options.templateOptions.disabled"
ng-model="::model[options.key]">
{{::options.templateOptions.label}}
{{::options.templateOptions.required ? '*' : ''}}
</label>
</div>
Error: angular-formly: formly-field directive apiCheck failed! value
at Argument 1
cannot have extra properties: className
, fieldGroup
.It is limited to $$hashKey
, type
, formly-field-directive-validation-failed
Hi Kent,
I get the above error when I copy and paste the demo code. I'm just trying it out and copying some fields from http://angular-formly.com/#/example/other/advanced-layout . I've checked and it's all included and dependancy injected. To me this looks like the bootstrap properties aren't registered. Does something need to be built maybe?
seems to be not connected to model see bin here: http://jsbin.com/yimogo/1/edit?js,output
try change Hot Air Baloon to another value.
(select example copied from documentation)
I implemented this myself with very minimal effort. Would be great to see this in here by default.
This is my implementation:
formlyConfig.setType({
name: 'multiSelect',
extends: 'select',
template: '<select multiple class="form-control" ng-model="model[options.key]"></select>'
});
I would gladly turn this into a pull request, but I'm fairly new to Javascript and I'm not sure how I would write tests for this.
From @Nishchit14 in formly-js/angular-formly#501:
Here i have to use two tab to go on next input field because of addons tabindex.
So if there is custom options for use tabindex for right/left addOns then it would so cool :)
And this is awesome ๐
Moving this to the proper repository.
I'm believe the tabindex gets added because of the ng-click. I think the real solution is to determine if the ng-click
is necessary (if an onClick
has been provided) and only add it if it is necessary. This would require additional logic here. I don't think that this would be a problem.
Hi.
Is this possible to add an empty option to the "select" type? Instead of doing a custom template...
<select ng-options="...">
<option value="">-- Empty option --</option>
</select>
Hi,
In my app, i have used bootstrapt from https://bootswatch.com/. After adding angular-formly-templates-bootstrap to my app i lost default colors for my app. I would like to come back to my original bootstrapt therefore i removed angular-formly-templates-bootstrap from index.html but angular formy doesn't work anymore. What is the solution in order to keep my original bootstrapt color and also i use angular formly?
Thank you.
It would be great if there was an option to control input sizes
I think that the types directory needs to be included here ..
... my production build does not load the multiCheckbox ... I think it's because the template isn't being processed.
Steve
ngtemplates: {
...
files: [
{
cwd: preBuiltDest + '/',
src: ['fields/**/*.html', 'wrappers/**/*.html', 'other/**/*.html'],
dest: templatesFile
}
]
}
},
Hi,
I have a question about the bootstrap template wrapper. Are there a way to add angular-message with has-error wrapper, (if yes how ?) or I need to override or rewrite an another wrapper from formly ?
Directly related to the resolution of formly-js/angular-formly#235.
Is angular
a necessary explicit dependency for formly templates? Since angular-formly
is already a dependency, the angular
dependency is implied.
Moved from formly-js/angular-formly#330
Original issue by @PhilFlash:
Hi,
Error is incorrect when you use a multicheckbox and option required.
See example:
http://plnkr.co/edit/IleV3U8AVY0Va3lbmUve?p=info
Steps to reproduce:
Only the last checkbox is used to check 'Required'
Would love to see built-in support for: http://getbootstrap.com/css/#forms-control-validation
tyvm
As apiCheck as an object has been deprecated (see: formly-js/angular-formly#334), custom types and wrappers should be updated accordingly.
I'm sorry I cannot provide a jsbin example because I am unaware of how to reproduce webpack issues. Basically, your dist directory is not available as an npm package and trying to include this library via require('angular-formly-templates-bootstrap')
fails for me.
Here's the comment I posted at the commit:
3e83fe5#commitcomment-13453757
I would normally send a pull request with this because it's very clearly resolvable with an .npmignore file but I do not know what kinds of practices you believe in. I'm going to pin my package to 6.1.0.
Cheers.
Update: Just for good measure, I added this pull request. #57
Thanks for reading.
hey i've got a problem:
1 - I have a form using angular-formly (LOVE IT BTW);
2 - I use dropzone.js to upload files;
3- i have a input field in wich i'd like to populate once the dropzone gives me the event "addedfile" with the name of the file that has been added;
how do I do that? I THINK it would be with expressionProperties or a watch but I'm a angularjs newbie so I have no idea on how to do that.
When creating a custom type that extends select, it uses the ng-options
attribute, which is now strictly for fields in Angular 1.4+. When ng-options is applied to other elements an error occurs (Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found!).
The use case for this change would be using a custom select field like ui-select, as shown in the formly example (http://angular-formly.com/#/example/integrations/ui-select).
I'm proposing that an additional configuration property be added for the select type to allow the attribute to be configurable. Defaulting the item to ng-options will keep it backwards compatible.
Suggested Change: mhazy/angular-formly-templates-bootstrap@5aff0c3
Due to server templating requirements, I've had to change the angular start and stop symbols from {{ }}
to [[ ]]
.
$interpolateProvider.startSymbol('[[').endSymbol(']]');
There's currently no way that I can find to change formly bootstrap to use other start/stop symbols other than manually editing the various .html
templates.
I would like to use input with 'input-lg' bootstrap class, can I override somewhere?
Thanks.
Whenever I check and then uncheck one of the checkboxes, the form will be set to invalid because required: true
, even though I did not specify that in temaplateOptions. I believe this is a bug that needs to be fixed.
npm ERR! peerinvalid The package angular-formly does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants angular-formly@>=4.0.5
129 verbose stack Error: The package angular-formly does not satisfy its siblings' peerDependencies requirements!
129 verbose stack at /usr/local/lib/node_modules/npm/lib/install.js:125:32
129 verbose stack at /usr/local/lib/node_modules/npm/lib/install.js:267:7
129 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-installed/read-installed.js:138:5
129 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
129 verbose stack at cb (/usr/local/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
129 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
129 verbose stack at asyncMap (/usr/local/lib/node_modules/npm/node_modules/slide/lib/async-map.js:27:18)
129 verbose stack at next (/usr/local/lib/node_modules/npm/node_modules/read-installed/read-installed.js:222:5)
129 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-installed/read-installed.js:175:7
129 verbose stack at LOOP (evalmachine.:1474:14)
Any ideas?
Hey there. How would one set a default option for a select field?
The api changed to ngModelAttributes
. The cols
and rows
needs to be updated to reflect this change.
Unless I am missing something (which of cause may well be the case). the multiCheckbox type doesn't initialize with the modelObject contents.
This is my first issue here so firstly I'd just like to say that I love this library and thank you for creating / maintaining it. I have been using it in my latest project for the last few weeks and it has saved me a LOT of time.
I have come across an issue though. When using the Advanced Layout ( http://angular-formly.com/#/example/other/advanced-layout ) I can not seem to get the expressionProperties to work correctly. I have adjusted the code in the above example to set an expressionProperty on the lastName field to be disabled when the firstName field is blank:
type: 'input', key: 'lastName', templateOptions: { label: 'Last Name' }, expressionProperties: { 'templateOptions.disabled':'!model.firstName' }
The lastName becomes disabled but never becomes enabled once I start to enter text in the firstName field. I am having the same issue in my own project.
Is this a bug or something I am doing incorrectly ?
Please review the change I made to the file: src/types/select.html in my fork of this repo at the following commit: rmulder@d7dcc6b#diff-e34487d2e565168713f0e02aaf3f89cc
I was pulling my hair out today trying to figure out why the 'value' attribute of the option tag was not filling in the values I was setting it to - until I realized that this select template does not support the current ng-options syntax. Please update this template at your earliest convenience, then I can change our bower.json back to point to the 'standard' version here...
Thanks!
there is something wrong in bower.json
dependencies
"angular-formly": "~1.0.0",
should be changed to new angular-formly version like "angular-formly": "~3.3.0",
It will make bower conflict error,please fix it.
thanks
This line reads:
if(opts.expressionProperties && opts.expressionProperties.required){
This will never evaluate to true
because required
is an invalid property for the root of the form config. It should read:
if(opts.expressionProperties && opts.expressionProperties['templateOptions.required']){
Sanity check? @ckniffen
I believe the full list is here but I wasn't able to get the app started (which I'll describe in a separate issue):
karma
karma
karma-webpack
karma-mocha
karma-firefox-launcher
karma-chrome-launcher
karma-chai
angular
angular-mocks
sinon-chai
Why this template requires bootstrap as bower dependency?
I'm using only angular-bootstrap without jQuery, so when using wiredep to include bower files in index.html script tag, it's not being included cause I excluded bootstrap in wiredep configuration.
var wiredepConfig = {
exclude: [/bootstrap.js$/, /bootstrap-sass\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
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.