├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bower.json ├── dist ├── angular-formly-templates-ionic.js └── angular-formly-templates-ionic.min.js ├── gulpfile.js ├── package.json └── src ├── fields ├── ion-checkbox.html ├── ion-floating-input.html ├── ion-inline-input.html ├── ion-input.html ├── ion-radio.html ├── ion-range.html ├── ion-select.html ├── ion-stacked-input.html ├── ion-textarea.html └── ion-toggle.html └── modules └── angular-formly-templates-ionic.js /.gitignore: -------------------------------------------------------------------------------- 1 | # generic (system) files/extensions we don't want 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | .idea/* 10 | *.DS_Store 11 | lib-cov 12 | pids 13 | logs 14 | results 15 | 16 | node_modules 17 | bower_components 18 | !demo/bower_components 19 | !tests/bower_components 20 | *.sublime-workspace 21 | # build folder 22 | .grunt 23 | .tmp 24 | examples/ 25 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | "**/.*", 2 | "node_modules", 3 | "bower_components", 4 | "test", 5 | "tests", 6 | "examples" 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 formly-js 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/formly-js/angular-formly?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 2 | 3 | # Angular-Formly: Ionic Framework Templates 4 | 5 | This is a template for [angular-formly](http://github.com/formly-js/angular-formly) and [Ionic](http://ionicframework.com/). This library is not standalone and requires angular-formly to be present and loaded. 6 | 7 | ### Install with Bower 8 | 9 | ```bash 10 | $ bower install api-check angular-formly angular-formly-templates-ionic --save 11 | ``` 12 | 13 | Reference the files in your `index.html` 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | ``` 21 | 22 | Then import the templates into your project. 23 | 24 | ```javascript 25 | angular.module("myApp", ["ionic", "formlyIonic"]) 26 | ``` 27 | 28 | And your're ready! 29 | 30 | ## Documentation 31 | 32 | See [angular-formly](http://docs.angular-formly.com) for formly core documentation. 33 | 34 | ### Common Properties 35 | 36 | NOTE: All of these properties will be under the `templateOptions` property as of angular-formly 3.0.0 37 | 38 | --- 39 | ##### label (string) 40 | >`label` is used to add an html label to each field. 41 | 42 | ###### Default 43 | >`undefined` 44 | 45 | --- 46 | ##### required (boolean) 47 | >`required` is used to add the required attribute to a form field. 48 | 49 | ###### Default 50 | >`undefined` 51 | 52 | --- 53 | ##### disabled (boolean) 54 | >`disabled` is used to add the disabled attribute to a form field. 55 | 56 | ###### Default 57 | >`undefined` 58 | 59 | --- 60 | ##### placeholder (string) 61 | >`placeholder` is used to add placeholder text to some inputs. 62 | 63 | ###### Default 64 | >`undefined` 65 | 66 | --- 67 | ##### description (string) 68 | >`description` is used to add descriptive text to all inputs. 69 | 70 | ###### Default 71 | >`undefined` 72 | 73 | --- 74 | ##### addonLeft (object) 75 | >`addonLeft` is used to add an add-on on the left of a field. The object accepts three properties: `text` that sets a simple text, `onClick` will add a `cursor:pointer` and an ng-click to the addon (invoked with the options and scope), and `class` that sets classes to the add-on. 76 | 77 | ###### Default 78 | >`undefined` 79 | 80 | --- 81 | ##### addonRight (object) 82 | >`addonRight` is used to add an add-on on the right of a field. The object accepts three properties: `text` that sets a simple text, `onClick` will add a `cursor:pointer` and an ng-click to the addon (invoked with the options and scope), and `class` that sets classes to the add-on. 83 | 84 | ###### Default 85 | >`undefined` 86 | 87 | ### Fields 88 | 89 | ### Form Fields 90 | 91 | Below is a detailed description of each form fields and its custom properties. 92 | 93 | #### Input form field (with Placeholder labels) 94 | >Uses the placeholder attribute to simulate the input"s label. The input uses the `` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc.. 95 | 96 | _Example text field_ 97 | ```json 98 | { 99 | "type": "input", 100 | "key": "firstName", 101 | "templateOptions": { 102 | "type": "text", 103 | "placeholder": "jane doe", 104 | "icon": "ion-person", 105 | "iconPlaceholder": true 106 | } 107 | } 108 | ``` 109 | 110 | --- 111 | #### Input form field (with Inline labels) 112 | >Places a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too. Uses the placeholder attribute to simulate the input"s label. The input uses the `` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc.. 113 | 114 | _Example text field_ 115 | ```json 116 | vm.userFields = [ 117 | { 118 | "key": "username", 119 | "type": "inline-input", 120 | "templateOptions": { 121 | "type": "text", 122 | "label": "Username" 123 | } 124 | }, { 125 | "key": "password", 126 | "type": "inline-input", 127 | "templateOptions": { 128 | "type": "password", 129 | "label": "Password" 130 | } 131 | } 132 | ]; 133 | ``` 134 | 135 | --- 136 | 137 | #### Input form field (with Stacked labels) 138 | >Stacked labels always places the label on top of the input. The input uses the `` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc.. 139 | 140 | _Example text field_ 141 | ```json 142 | vm.userFields = [ 143 | { 144 | "key": "fname", 145 | "type": "stacked-input", 146 | "templateOptions": { 147 | "type": "text", 148 | "label": "First Name", 149 | "placeholder": "First Name" 150 | } 151 | }, { 152 | "key": "lname", 153 | "type": "stacked-input", 154 | "templateOptions": { 155 | "type": "text", 156 | "label": "Last Name", 157 | "placeholder": "Last Name" 158 | } 159 | }, { 160 | "key": "email", 161 | "type": "stacked-input", 162 | "templateOptions": { 163 | "type": "email", 164 | "label": "Email", 165 | "placeholder": "Email" 166 | } 167 | } 168 | ] 169 | ``` 170 | 171 | --- 172 | 173 | #### Input form field (with Floating labels) 174 | >Floating labels are just like Stacked Labels, except that their labels animate, or "float" up when text is entered in the input. The input uses the `` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc.. 175 | 176 | _Example text field_ 177 | ```json 178 | vm.userFields = [ 179 | { 180 | "key": "fname", 181 | "type": "floating-input", 182 | "templateOptions": { 183 | "type": "text", 184 | "label": "First Name", 185 | "placeholder": "First Name" 186 | } 187 | }, { 188 | "key": "lname", 189 | "type": "floating-input", 190 | "templateOptions": { 191 | "type": "text", 192 | "label": "Last Name", 193 | "placeholder": "Last Name" 194 | } 195 | }, { 196 | "key": "email", 197 | "type": "floating-input", 198 | "templateOptions": { 199 | "type": "email", 200 | "label": "Email", 201 | "placeholder": "Email" 202 | } 203 | } 204 | ] 205 | ``` 206 | 207 | --- 208 | #### Textarea form field 209 | >The textarea field creates multiline input with a textarea element. Currently Ionic template does not support label on input type, use placeholder instead. 210 | 211 | ##### lines (number, optional) 212 | >`lines` sets the rows attribute for the textarea element. 213 | 214 | _Example textarea field_ 215 | ```json 216 | { 217 | "type": "textarea", 218 | "key": "about", 219 | "templateOptions": { 220 | "placeholder": "Cats make me smile", 221 | "rows": 4 222 | } 223 | } 224 | ``` 225 | 226 | --- 227 | #### Checkbox form field 228 | >The checkbox field allows checkbox input with a input element set to `type="checkbox"`. It doesn"t have any custom properties. 229 | 230 | _Example checkbox field_ 231 | ```json 232 | { 233 | "type": "checkbox", 234 | "key": "checkThis", 235 | "templateOptions": { 236 | "label": "Check this box" 237 | } 238 | } 239 | ``` 240 | 241 | --- 242 | #### Range form field 243 | >The range can take in selected Ionicons as the min and max icons. You can also change the color by using another class. Label is also supported. 244 | 245 | _Example range field_ 246 | ```json 247 | { 248 | "key": "volumeLevel", 249 | "type": "range", 250 | "templateOptions": { 251 | "label": "Volume", 252 | "rangeClass": "calm", 253 | "min": "0", 254 | "max": "100", 255 | "step": "5", 256 | "value": "25", 257 | "minIcon": "ion-volume-low", 258 | "maxIcon": "ion-volume-high" 259 | } 260 | } 261 | ``` 262 | 263 | --- 264 | #### Radio form field 265 | >The radio field allows choice input with a series of linked inputs, use `type="radio"`. 266 | 267 | ##### options (array, required) 268 | >`options` is an array of options for the radio form field to display. Each option should be an object with a `text`(string or number) and `value`(string or number). 269 | >You can also override the icon that is diplayed with the option by passing in the icon key with an Ionicon identifer. 270 | 271 | _Example radio field_ 272 | ```json 273 | { 274 | "key": "triedEmber", 275 | "type": "radio", 276 | "templateOptions": { 277 | "label": "Have you tried EmberJs yet?", 278 | "options": [{ 279 | "value": "A", 280 | "text": "A", 281 | "icon": "ion-home" 282 | }, { 283 | "value": "B", 284 | "text": "B", 285 | }, { 286 | "value": "C", 287 | "text": "C", 288 | }] 289 | } 290 | } 291 | ``` 292 | 293 | --- 294 | #### Select form field 295 | >The select field allows selection via dropdown using the select element. 296 | 297 | ##### options (array, required) 298 | >`options` is an array of options for the select form field to display. Each option should be an object with a `name`(string). You may optionally add a `group` or "id" to some or all of your options. 299 | 300 | ##### labelProp (string, optional) 301 | >`labelProp` is what is used for what is shown to the user. Defaults to `name` 302 | 303 | ##### valueProp (string, optional) 304 | >`valueProp` is what is used for the value assigned to the model. Defaults to `value` 305 | 306 | ##### groupProp (string, optional) 307 | >`groupProp` is what is used to group the options 308 | 309 | [Example](http://angular-formly.com/#/example/bootstrap-formly/select) 310 | 311 | _Example select field_ 312 | ```json 313 | { 314 | "key": "marvel3", 315 | "type": "select", 316 | "templateOptions": { 317 | "label": "Select with custom name/value/group", 318 | "options": [{ 319 | "label": "Iron Man", 320 | "id": "iron_man", 321 | "gender": "Male" 322 | }, { 323 | "label": "Captain America", 324 | "id": "captain_america", 325 | "gender": "Male" 326 | }, { 327 | "label": "Black Widow", 328 | "id": "black_widow", 329 | "gender": "Female" 330 | }, { 331 | "label": "Hulk", 332 | "id": "hulk", 333 | "gender": "Male" 334 | }, { 335 | "label": "Captain Marvel", 336 | "id": "captain_marvel", 337 | "gender": "Female" 338 | }], 339 | "groupProp": "gender", 340 | "valueProp": "id", 341 | "labelProp": "label" 342 | } 343 | } 344 | ``` 345 | 346 | ### ToDos 347 | 348 | - Write tests 349 | 350 | - [x] Move to gulp 351 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-formly-templates-ionic", 3 | "version": "1.2.2", 4 | "authors": [ 5 | "Astrism " 6 | ], 7 | "contributors": [ 8 | "Astrism ", 9 | "Kent C. Dodds ", 10 | "Mike Hartington " 11 | ], 12 | "main": "dist/angular-formly-templates-ionic.js", 13 | "description": "Angular-Formly plugin for Ionic Framework.", 14 | "keywords": [ 15 | "AngularJs", 16 | "form", 17 | "formly", 18 | "json", 19 | "ionic", 20 | "html" 21 | ], 22 | "license": "MIT", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "test", 28 | "tests", 29 | "examples" 30 | ], 31 | "dependencies": { 32 | "angular": ">=1.2.x", 33 | "angular-formly": ">=3.0.0", 34 | "ionic": ">=1.0.0" 35 | }, 36 | "devDependencies": { 37 | "chai": "~1.9.1", 38 | "mocha": "~1.21.4" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /dist/angular-formly-templates-ionic.js: -------------------------------------------------------------------------------- 1 | angular.module('formlyIonic', ['formly'], ["formlyConfigProvider", function configFormlyIonic(formlyConfigProvider) { 2 | 'use strict'; 3 | 4 | 5 | angular.forEach(['checkbox', 'input', 'radio', 'range', 'textarea', 'toggle', 'select', 'floating-input', 'stacked-input', 'inline-input'], function (fieldName) { 6 | formlyConfigProvider.setType({ 7 | name: fieldName, 8 | templateUrl: getFieldTemplateUrl(fieldName) 9 | }); 10 | }); 11 | 12 | formlyConfigProvider.templateManipulators.preWrapper.push(function ariaDescribedBy(template, options, scope) { 13 | if (options.templateOptions && angular.isDefined(options.templateOptions.description) && 14 | options.type !== 'radio' && options.type !== 'checkbox') { 15 | var el = angular.element(''); 16 | el.append(template); 17 | var modelEls = angular.element(el[0].querySelectorAll('[ng-model]')); 18 | if (modelEls) { 19 | el.append( 20 | '

' + 23 | '{{options.templateOptions.description}}' + 24 | '

' 25 | ); 26 | modelEls.attr('aria-describedby', scope.id + '_description'); 27 | return el.html(); 28 | } else { 29 | return template; 30 | } 31 | } else { 32 | return template; 33 | } 34 | }); 35 | 36 | function getFieldTemplateUrl(name) { 37 | return 'fields/ion-' + name + '.html'; 38 | } 39 | 40 | }]); 41 | 42 | angular.module("formlyIonic").run(["$templateCache", function($templateCache) {$templateCache.put("fields/ion-checkbox.html","{{options.templateOptions.label}}"); 43 | $templateCache.put("fields/ion-floating-input.html",""); 44 | $templateCache.put("fields/ion-inline-input.html",""); 45 | $templateCache.put("fields/ion-input.html",""); 46 | $templateCache.put("fields/ion-radio.html","{{ item.text }}"); 47 | $templateCache.put("fields/ion-range.html","
{{options.templateOptions.label}}
"); 48 | $templateCache.put("fields/ion-select.html",""); 49 | $templateCache.put("fields/ion-stacked-input.html",""); 50 | $templateCache.put("fields/ion-textarea.html",""); 51 | $templateCache.put("fields/ion-toggle.html","{{options.templateOptions.label}}");}]); -------------------------------------------------------------------------------- /dist/angular-formly-templates-ionic.min.js: -------------------------------------------------------------------------------- 1 | angular.module("formlyIonic",["formly"],["formlyConfigProvider",function(t){"use strict";function e(t){return"fields/ion-"+t+".html"}angular.forEach(["checkbox","input","radio","range","textarea","toggle","select","floating-input","stacked-input","inline-input"],function(o){t.setType({name:o,templateUrl:e(o)})}),t.templateManipulators.preWrapper.push(function(t,e,o){if(e.templateOptions&&angular.isDefined(e.templateOptions.description)&&"radio"!==e.type&&"checkbox"!==e.type){var i=angular.element("");i.append(t);var n=angular.element(i[0].querySelectorAll("[ng-model]"));return n?(i.append('

{{options.templateOptions.description}}

'),n.attr("aria-describedby",o.id+"_description"),i.html()):t}return t})}]),angular.module("formlyIonic").run(["$templateCache",function(t){t.put("fields/ion-checkbox.html",'{{options.templateOptions.label}}'),t.put("fields/ion-floating-input.html",''),t.put("fields/ion-inline-input.html",''),t.put("fields/ion-input.html",''),t.put("fields/ion-radio.html",'{{ item.text }}'),t.put("fields/ion-range.html",'
{{options.templateOptions.label}}
'),t.put("fields/ion-select.html",''),t.put("fields/ion-stacked-input.html",''),t.put("fields/ion-textarea.html",''),t.put("fields/ion-toggle.html",'{{options.templateOptions.label}}')}]); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var concat = require('gulp-concat'); 3 | var template = require('gulp-ng-templates'); 4 | var rename = require('gulp-rename'); 5 | var ngAnnotate = require('gulp-ng-annotate'); 6 | var uglify = require('gulp-uglify'); 7 | var gulp = require('gulp'); 8 | var git = require('gulp-git'); 9 | var bump = require('gulp-bump'); 10 | var filter = require('gulp-filter'); 11 | var tag_version = require('gulp-tag-version'); 12 | var minifyHtml = require("gulp-minify-html"); 13 | 14 | //Build Vars 15 | var ionicTemplates = 'templates-ionic'; 16 | var prebuildDir = '.tmp'; 17 | var finalName = 'angular-formly-templates-ionic'; 18 | 19 | 20 | gulp.task('default', ['build']); 21 | 22 | 23 | gulp.task('template', function() { 24 | return gulp.src('src/fields/*html') 25 | //.pipe(htmlmin({collapseWhitespace: true})) 26 | .pipe(minifyHtml({ 27 | empty: false, 28 | spare: true, 29 | quotes: true 30 | })) 31 | .pipe(template({ 32 | filename: ionicTemplates + ".js", 33 | module: 'formlyIonic', 34 | path: function(path, base) { 35 | return path.replace(base, 'fields/'); 36 | }, 37 | header: 'angular.module("<%= module %>").run(["$templateCache", function($templateCache) {' 38 | 39 | })) 40 | .pipe(gulp.dest('.tmp')); 41 | }); 42 | 43 | // Then save the main provider in the same tmp dir 44 | gulp.task('mkSrc', function() { 45 | return gulp.src('./src/modules/*.js') 46 | // .pipe(concat('all.js')) 47 | .pipe(gulp.dest('./.tmp/')); 48 | }); 49 | 50 | gulp.task('build', ['template', 'mkSrc'], function() { 51 | return gulp.src('./.tmp/*.js') 52 | .pipe(ngAnnotate()) 53 | .pipe(concat(finalName + ".js")) 54 | .pipe(gulp.dest('./dist')) 55 | .pipe(uglify()) 56 | .pipe(rename({ 57 | extname: '.min.js' 58 | })) 59 | .pipe(gulp.dest('./dist')); 60 | }); 61 | 62 | function inc(importance) { 63 | // get all the files to bump version in 64 | return gulp.src(['./package.json', './bower.json']) 65 | // bump the version number in those files 66 | .pipe(bump({ 67 | type: importance 68 | })) 69 | // save it back to filesystem 70 | .pipe(gulp.dest('./')) 71 | // commit the changed version number 72 | .pipe(git.commit('bumps package version')) 73 | 74 | // read only one file to get the version number 75 | .pipe(filter('package.json')) 76 | // **tag it in the repository** 77 | .pipe(tag_version()); 78 | } 79 | 80 | gulp.task('patch', ['build'], function() { 81 | return inc('patch'); 82 | }); 83 | gulp.task('minor', ['build'], function() { 84 | return inc('minor'); 85 | }); 86 | gulp.task('major', ['build'], function() { 87 | return inc('major'); 88 | }); 89 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-formly-templates-ionic", 3 | "version": "1.2.2", 4 | "author": "Astrism ", 5 | "contributors": [ 6 | "Astrism ", 7 | "Kent C. Dodds ", 8 | "Mike Hartington " 9 | ], 10 | "homepage": "http://formly-js.github.io/angular-formly-templates-ionic/", 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/formly-js/angular-formly-templates-ionic.git" 14 | }, 15 | "main": "dist/angular-formly-templates-ionic.min.js", 16 | "licenses": [ 17 | { 18 | "type": "MIT", 19 | "url": "https://raw.githubusercontent.com/formly-js/angular-formly-templates-ionic/master/LICENSE" 20 | } 21 | ], 22 | "scripts": { 23 | "build": "./node_modules/.bin/grunt build" 24 | }, 25 | "description": "Angular-Formly plugin which outputs plain html form fields.", 26 | "peerDependencies": { 27 | "angular": "^1.x", 28 | "angular-formly": ">=3.0.0", 29 | "api-check": ">=7.5.0", 30 | "ionic-sdk": "^1.0.0" 31 | }, 32 | "dependencies": { 33 | "angular": "^1.x", 34 | "angular-formly": ">=3.0.0", 35 | "api-check": ">=7.5.0", 36 | "ionic-sdk": "^1.0.0" 37 | }, 38 | "devDependencies": { 39 | "bower": "^1.3.3", 40 | "gulp": "^3.5.6", 41 | "gulp-bump": "^0.3.0", 42 | "gulp-concat": "^2.2.0", 43 | "gulp-filter": "^2.0.2", 44 | "gulp-git": "^1.1.0", 45 | "gulp-minify-html": "^1.0.2", 46 | "gulp-ng-annotate": "^0.5.2", 47 | "gulp-ng-templates": "0.0.5", 48 | "gulp-rename": "^1.2.0", 49 | "gulp-tag-version": "^1.2.1", 50 | "gulp-uglify": "^1.1.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/fields/ion-checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | {{options.templateOptions.label}} 3 | 4 | -------------------------------------------------------------------------------- /src/fields/ion-floating-input.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/fields/ion-inline-input.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/fields/ion-input.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/fields/ion-radio.html: -------------------------------------------------------------------------------- 1 | 2 | {{ item.text }} 3 | 4 | -------------------------------------------------------------------------------- /src/fields/ion-range.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{options.templateOptions.label}} 4 | 5 | 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /src/fields/ion-select.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/fields/ion-stacked-input.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/fields/ion-textarea.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/fields/ion-toggle.html: -------------------------------------------------------------------------------- 1 | 2 | {{options.templateOptions.label}} 3 | 4 | -------------------------------------------------------------------------------- /src/modules/angular-formly-templates-ionic.js: -------------------------------------------------------------------------------- 1 | angular.module('formlyIonic', ['formly'], function configFormlyIonic(formlyConfigProvider) { 2 | 'use strict'; 3 | 4 | 5 | angular.forEach(['checkbox', 'input', 'radio', 'range', 'textarea', 'toggle', 'select', 'floating-input', 'stacked-input', 'inline-input'], function (fieldName) { 6 | formlyConfigProvider.setType({ 7 | name: fieldName, 8 | templateUrl: getFieldTemplateUrl(fieldName) 9 | }); 10 | }); 11 | 12 | formlyConfigProvider.templateManipulators.preWrapper.push(function ariaDescribedBy(template, options, scope) { 13 | if (options.templateOptions && angular.isDefined(options.templateOptions.description) && 14 | options.type !== 'radio' && options.type !== 'checkbox') { 15 | var el = angular.element(''); 16 | el.append(template); 17 | var modelEls = angular.element(el[0].querySelectorAll('[ng-model]')); 18 | if (modelEls) { 19 | el.append( 20 | '

' + 23 | '{{options.templateOptions.description}}' + 24 | '

' 25 | ); 26 | modelEls.attr('aria-describedby', scope.id + '_description'); 27 | return el.html(); 28 | } else { 29 | return template; 30 | } 31 | } else { 32 | return template; 33 | } 34 | }); 35 | 36 | function getFieldTemplateUrl(name) { 37 | return 'fields/ion-' + name + '.html'; 38 | } 39 | 40 | }); 41 | --------------------------------------------------------------------------------