Comments (12)
Like this :-)
from angular-formly-templates-bootstrap.
Let me know if you need any more help :-)
from angular-formly-templates-bootstrap.
Updated URL to that example: http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal
from angular-formly-templates-bootstrap.
👍 thanks! Updating the original link as well.
from angular-formly-templates-bootstrap.
Just started using Angular Formly about 3 hours ago and needed a horizontal form. Talk about perfect timing :) Got it working like a charm and added a horizontalSelect type to boot. Thanks again!
from angular-formly-templates-bootstrap.
One thing I did notice, however, is that the templateOptions: {required: true} no longer provides the asterisk next to the label. I can manually add it to '{{to.label}} *' for a workaround in the setWrapper template.
from angular-formly-templates-bootstrap.
Yeah, I updated the example: http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal
from angular-formly-templates-bootstrap.
Works great. Thanks!
from angular-formly-templates-bootstrap.
how can i make horizontalSelect ?
from angular-formly-templates-bootstrap.
Per the documentation added here: http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal you can add a formlyConfigProvider.setType({}) for a select.
angular
.module('app',['formly','formlyBootstrap'])
.config(config);
function config(formlyConfigProvider) {
// custom configuration for the formly templates
formlyConfigProvider.setWrapper({
name: 'horizontalBootstrapLabel',
template: [
'<label for="{{::id}}" class="col-sm-2 control-label">',
'{{to.label}} {{to.required ? "*" : ""}}',
'</label>',
'<div class="col-sm-9">',
'<formly-transclude></formly-transclude>',
'</div>'
].join(' ')
});
// horizontal inputs
formlyConfigProvider.setType({
name: 'horizontalInput',
extends: 'input',
wrapper: ['horizontalBootstrapLabel', 'bootstrapHasError']
});
// horizontal selects
formlyConfigProvider.setType({
name: 'horizontalSelect',
extends: 'select',
wrapper: ['horizontalBootstrapLabel', 'bootstrapHasError']
});
}
HTML
<form class="form-horizontal">
<formly-form
model="ctrl.form_model"
fields="ctrl.form_fields">
</formly-form>
</form>
from angular-formly-templates-bootstrap.
Thanks @robrothedev, i should have seen that , sorry
from angular-formly-templates-bootstrap.
Not a problem and you're welcome.
from angular-formly-templates-bootstrap.
Related Issues (20)
- Radio elements disabled HOT 1
- Trying to contribute - build error on npm install HOT 2
- Dinamically generates fields
- Support for custom interpolation symbols
- Formly radio button and checkbox looks empty even on selection HOT 2
- apiCheck warnings when using an object for select options
- addOnRight/addOnLeft onClick functions not working properly
- Bootstrap 4 HOT 1
- New type extends 'select' setting error HOT 1
- "Argument 'module' is not a function, got Object" when inject module dependencies
- multiCheckbox with a key in a nested json model does not work HOT 6
- Not compatible with horizontal forms HOT 1
- Disable particular radio options HOT 1
- Multicheckbow is not working with JSON objects
- Don't have dist in 6.3.1 version HOT 1
- Radio option description
- data-placeholder attribute is missing from select type. HOT 6
- Set error and 'has-error' after form submitting.
- Select field is not working
- Cannot read property '$setTouched' of undefined HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-formly-templates-bootstrap.