angular-formly-templates-vanilla - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

bower.json

 {
   "name": "angular-formly-templates-vanilla",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "authors": [
@@ -5,0 +5,0 @@ "Astrism <[e-mail]>"

CONTRIBUTING.md

 # Contributing
 
-## Issues
-
-If you've found an issue, please submit it in [the issues](https://github.com/formly-js/angular-formly-templates-vanilla/issues) with a link to a plunker that demonstrates the issue (use [this template](http://plnkr.co/edit/tpl:1R3t4fvpXcJyiu96ICY5?p=preview))
-
-## Pull Requests
-
-If you would like to add functionality, please submit [an issue](https://github.com/formly-js/angular-formly-templates-vanilla/issues) first to make sure it's a direction we want to take.
-
-When submitting a Pull Request please submit it to the `master` branch.
-
-Please do the following:
-* Follow the existing styles
-** Use the third option here: http://blogs.msdn.com/b/cyrusn/archive/2004/09/14/229474.aspx (Thats how we roll)
-* Update the README with documentation so people can read how your changes work
-* Update the example so people can see how your changes work
-
-### Development
-
-1. `git checkout master`
-	1. run `npm install && bower install`
-	2. test your code using `grunt dev` which hosts the app at `http://localhost:4000`
-	3. commit your changes
-3. update README, CHANGELOG, bower.json, and do any other final polishing to prepare for publishing
-	1. git commit changes
-
-*Note:* There's a symlink for `src` and `bower_components` in the `demo` and `tests` folders. Just FYI...
-
-### Grunt targets
-* `grunt dev`: Creates a server for testing at `http://0.0.0.0:4000`
-* `grunt build`: Creates the dist
-* `grunt publish`: Copies the src folder and bower_components to gh-pages
-
-### What do you need help with?
-
-* Tests! We don't have any... But we do have the scaffolding for them.
-* Any of the issues in GitHub, let us know if you have some time to fix one.
+See the instructions for contributing on the
+[angular-formly core github repo](https://github.com/formly-js/angular-formly/blob/master/CONTRIBUTING.md)

dist/angular-formly-templates-vanilla.js

@@ -1,2 +0,2 @@
-// "formlyVanilla" version 2.0.0 built with ♥ by Astrism <[e-mail]>, Kent C. Dodds <[e-mail]> (ó ì_í)=óò=(ì_í ò)
+// "formlyVanilla" version 3.0.0 built with ♥ by Astrism <[e-mail]>, Kent C. Dodds <[e-mail]> (ó ì_í)=óò=(ì_í ò)
 (function (root, factory) {
@@ -18,28 +18,80 @@ if (typeof define === 'function' && define.amd) {
 
-angular.module('formlyVanilla', ['formly']);
-angular.module('formlyVanilla').run(['$templateCache', function($templateCache) {
+angular.module('formlyVanilla', ['formly'], ["formlyConfigProvider", function configFormlyVanilla(formlyConfigProvider) {
   'use strict';
 
-  $templateCache.put('fields/formly-field-checkbox.html',
-    "<div><label><input type=checkbox id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\"> {{options.label || 'Checkbox'}} {{options.required ? '*' : ''}}</label><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
-  );
+  formlyConfigProvider.setWrapper([
+    {
+      name: 'vanillaLabel',
+      templateUrl: 'wrappers/formly-wrappers-vanilla-label.html'
+    }
+  ]);
 
+  var commonWrappers = ['vanillaLabel'];
 
-  $templateCache.put('fields/formly-field-email.html',
-    "<div><label for={{id}}>{{options.label || 'Email'}} {{options.required ? '*' : ''}}</label><input type=email id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
-  );
+  angular.forEach(['radio', 'select'], function(fieldName) {
+    formlyConfigProvider.setType({
+      name: fieldName,
+      templateUrl: getFieldTemplateUrl(fieldName),
+      wrapper: commonWrappers
+    });
+  });
+  formlyConfigProvider.setType({
+    name: 'input',
+    template: '<input class="formly-field-input" ng-model="model[options.key]">',
+    wrapper: commonWrappers
+  });
 
+  // textarea has custom defaultOptions
+  formlyConfigProvider.setType({
+    name: 'textarea',
+    template: '<textarea class="formly-field-textarea" ng-model="model[options.key]"></textarea>',
+    wrapper: commonWrappers,
+    defaultOptions: {
+      data: {
+        ngModelAttributes: {rows: 'rows', cols: 'cols'}
+      }
+    }
+  });
 
-  $templateCache.put('fields/formly-field-hidden.html',
-    "<input type=hidden ng-model=\"model[options.key || index]\">"
-  );
+  // checkbox doesn't have a vanillaLabel wrapper
+  formlyConfigProvider.setType({
+    name: 'checkbox',
+    templateUrl: getFieldTemplateUrl('checkbox')
+  });
 
+  formlyConfigProvider.templateManipulators.preWrapper.push(function ariaDescribedBy(template, options, scope) {
+    if (options.templateOptions && angular.isDefined(options.templateOptions.description) &&
+      options.type !== 'radio' && options.type !== 'checkbox') {
+      var el = angular.element('<a></a>');
+      el.append(template);
+      var modelEls = angular.element(el[0].querySelectorAll('[ng-model]'));
+      if (modelEls) {
+        el.append(
+          '<p id="' + scope.id + '_description"' +
+              'class="help-block"' +
+              'ng-if="options.templateOptions.description">' +
+            '{{options.templateOptions.description}}' +
+          '</p>'
+        );
+        modelEls.attr('aria-describedby', scope.id + '_description');
+        return el.html();
+      } else {
+        return template;
+      }
+    } else {
+      return template;
+    }
+  });
 
-  $templateCache.put('fields/formly-field-number.html',
-    "<div><label for={{id}}>{{options.label || 'Number'}} {{options.required ? '*' : ''}}</label><input type=number id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled min={{options.min}} max={{options.max}} ng-minlength={{options.minlength}} ng-maxlength={{options.maxlength}} ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
-  );
+  function getFieldTemplateUrl(name) {
+    return 'fields/formly-field-' + name + '.html';
+  }
 
+}]);
 
-  $templateCache.put('fields/formly-field-password.html',
-    "<div><label for={{id}}>{{options.label || 'Password'}} {{options.required ? '*' : ''}}</label><input type=password id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-trim=\"{{options.trimWhitespace || false}}\" ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
+angular.module('formlyVanilla').run(['$templateCache', function($templateCache) {
+  'use strict';
+
+  $templateCache.put('fields/formly-field-checkbox.html',
+    "<label><input type=checkbox class=formly-field-checkbox ng-model=model[options.key]> {{options.templateOptions.label}} {{options.templateOptions.required ? '*' : ''}}</label>"
   );
@@ -49,3 +101,3 @@
   $templateCache.put('fields/formly-field-radio.html',
-    "<div><label>{{options.label}} {{options.required ? '*' : ''}}</label><div ng-repeat=\"(key, option) in options.options\"><label><input type=radio formly-dynamic-name=id formly-custom-validation=options.validators id=\"{{id + '_'+ $index}}\" aria-describedby={{id}}_description ng-value=option.value ng-required=options.required ng-model=\"$parent.model[$parent.options.key || $parent.index]\"> {{option.name}}</label><p id={{id}}_description ng-if=option.description>{{option.description}}</p></div></div>"
+    "<div ng-repeat=\"(key, option) in options.templateOptions.options\" class=radio><label><input type=radio id=\"{{id + '_'+ $index}}\" ng-value=option.value ng-model=model[options.key]> {{option.name}}</label></div>"
   );
@@ -55,31 +107,14 @@
   $templateCache.put('fields/formly-field-select.html',
-    "<div><label for={{id}}>{{options.label || 'Select'}} {{options.required ? '*' : ''}}</label><select id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators aria-describedby={{id}}_description ng-model=\"model[options.key || index]\" ng-required=options.required ng-disabled=options.disabled ng-options=\"option.value as option.name group by option.group for option in options.options\"></select><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
+    "<select ng-model=model[options.key] ng-options=\"option.value as option.name group by option.group for option in options.templateOptions.options\"></select>"
   );
 
 
-  $templateCache.put('fields/formly-field-text.html',
-    "<div><label for={{id}}>{{options.label || 'Text'}} {{options.required ? '*' : ''}}</label><input type=text id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
+  $templateCache.put('wrappers/formly-wrappers-vanilla-label.html',
+    "<div><label for={{id}} class=formly-field-label>{{options.templateOptions.label}} {{options.templateOptions.required ? '*' : ''}}</label><formly-transclude></formly-transclude></div>"
   );
 
-
-  $templateCache.put('fields/formly-field-textarea.html',
-    "<div><label for={{id}}>{{options.label || 'Text'}} {{options.required ? '*' : ''}}</label><textarea type=text id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators rows={{options.lines}} placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\">\n" +
-    "\t</textarea><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"
-  );
-
 }]);
 
-// This file adds the default templates to the formlyConfigProvider.
-angular.module('formlyVanilla').config(["formlyConfigProvider", function(formlyConfigProvider) {
-  'use strict';
-  var fields = [
-    'textarea', 'radio', 'select', 'number', 'checkbox',
-    'password', 'hidden', 'email', 'text'
-  ];
-  angular.forEach(fields, function(field) {
-    formlyConfigProvider.setTemplateUrl(field, 'fields/formly-field-' + field + '.html');
-  });
-}]);
 return "formlyVanilla";
 
 }));

dist/angular-formly-templates-vanilla.min.js

@@ -1,2 +0,2 @@
-!function(a,b){"function"==typeof define&&define.amd?define(["angular"],function(c){return a.returnExportsGlobal=b(c)}):"object"==typeof exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){return a.module("formlyVanilla",["formly"]),a.module("formlyVanilla").run(["$templateCache",function(a){"use strict";a.put("fields/formly-field-checkbox.html","<div><label><input type=checkbox id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\"> {{options.label || 'Checkbox'}} {{options.required ? '*' : ''}}</label><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"),a.put("fields/formly-field-email.html","<div><label for={{id}}>{{options.label || 'Email'}} {{options.required ? '*' : ''}}</label><input type=email id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"),a.put("fields/formly-field-hidden.html",'<input type=hidden ng-model="model[options.key || index]">'),a.put("fields/formly-field-number.html","<div><label for={{id}}>{{options.label || 'Number'}} {{options.required ? '*' : ''}}</label><input type=number id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled min={{options.min}} max={{options.max}} ng-minlength={{options.minlength}} ng-maxlength={{options.maxlength}} ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"),a.put("fields/formly-field-password.html","<div><label for={{id}}>{{options.label || 'Password'}} {{options.required ? '*' : ''}}</label><input type=password id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-trim=\"{{options.trimWhitespace || false}}\" ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"),a.put("fields/formly-field-radio.html","<div><label>{{options.label}} {{options.required ? '*' : ''}}</label><div ng-repeat=\"(key, option) in options.options\"><label><input type=radio formly-dynamic-name=id formly-custom-validation=options.validators id=\"{{id + '_'+ $index}}\" aria-describedby={{id}}_description ng-value=option.value ng-required=options.required ng-model=\"$parent.model[$parent.options.key || $parent.index]\"> {{option.name}}</label><p id={{id}}_description ng-if=option.description>{{option.description}}</p></div></div>"),a.put("fields/formly-field-select.html","<div><label for={{id}}>{{options.label || 'Select'}} {{options.required ? '*' : ''}}</label><select id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators aria-describedby={{id}}_description ng-model=\"model[options.key || index]\" ng-required=options.required ng-disabled=options.disabled ng-options=\"option.value as option.name group by option.group for option in options.options\"></select><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"),a.put("fields/formly-field-text.html","<div><label for={{id}}>{{options.label || 'Text'}} {{options.required ? '*' : ''}}</label><input type=text id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\"><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>"),a.put("fields/formly-field-textarea.html","<div><label for={{id}}>{{options.label || 'Text'}} {{options.required ? '*' : ''}}</label><textarea type=text id={{id}} formly-dynamic-name=id formly-custom-validation=options.validators rows={{options.lines}} placeholder={{options.placeholder}} aria-describedby={{id}}_description ng-required=options.required ng-disabled=options.disabled ng-model=\"model[options.key || index]\">\n	</textarea><p id={{id}}_description ng-if=options.description>{{options.description}}</p></div>")}]),a.module("formlyVanilla").config(["formlyConfigProvider",function(b){"use strict";var c=["textarea","radio","select","number","checkbox","password","hidden","email","text"];a.forEach(c,function(a){b.setTemplateUrl(a,"fields/formly-field-"+a+".html")})}]),"formlyVanilla"});
+!function(a,b){"function"==typeof define&&define.amd?define(["angular"],function(c){return a.returnExportsGlobal=b(c)}):"object"==typeof exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){return a.module("formlyVanilla",["formly"],["formlyConfigProvider",function(b){"use strict";function c(a){return"fields/formly-field-"+a+".html"}b.setWrapper([{name:"vanillaLabel",templateUrl:"wrappers/formly-wrappers-vanilla-label.html"}]);var d=["vanillaLabel"];a.forEach(["radio","select"],function(a){b.setType({name:a,templateUrl:c(a),wrapper:d})}),b.setType({name:"input",template:'<input class="formly-field-input" ng-model="model[options.key]">',wrapper:d}),b.setType({name:"textarea",template:'<textarea class="formly-field-textarea" ng-model="model[options.key]"></textarea>',wrapper:d,defaultOptions:{data:{ngModelAttributes:{rows:"rows",cols:"cols"}}}}),b.setType({name:"checkbox",templateUrl:c("checkbox")}),b.templateManipulators.preWrapper.push(function(b,c,d){if(c.templateOptions&&a.isDefined(c.templateOptions.description)&&"radio"!==c.type&&"checkbox"!==c.type){var e=a.element("<a></a>");e.append(b);var f=a.element(e[0].querySelectorAll("[ng-model]"));return f?(e.append('<p id="'+d.id+'_description"class="help-block"ng-if="options.templateOptions.description">{{options.templateOptions.description}}</p>'),f.attr("aria-describedby",d.id+"_description"),e.html()):b}return b})}]),a.module("formlyVanilla").run(["$templateCache",function(a){"use strict";a.put("fields/formly-field-checkbox.html","<label><input type=checkbox class=formly-field-checkbox ng-model=model[options.key]> {{options.templateOptions.label}} {{options.templateOptions.required ? '*' : ''}}</label>"),a.put("fields/formly-field-radio.html",'<div ng-repeat="(key, option) in options.templateOptions.options" class=radio><label><input type=radio id="{{id + \'_\'+ $index}}" ng-value=option.value ng-model=model[options.key]> {{option.name}}</label></div>'),a.put("fields/formly-field-select.html",'<select ng-model=model[options.key] ng-options="option.value as option.name group by option.group for option in options.templateOptions.options"></select>'),a.put("wrappers/formly-wrappers-vanilla-label.html","<div><label for={{id}} class=formly-field-label>{{options.templateOptions.label}} {{options.templateOptions.required ? '*' : ''}}</label><formly-transclude></formly-transclude></div>")}]),"formlyVanilla"});
 //# sourceMappingURL=angular-formly-templates-vanilla.min.map

Gruntfile.js

@@ -83,3 +83,3 @@ 'use strict';
             cwd: preBuiltDest + '/',
-            src: [ 'fields/**/*.html' ],
+            src: [ 'fields/**/*.html', 'wrappers/**/*.html' ],
             dest: templatesFile
@@ -86,0 +86,0 @@ }

package.json

 {
   "name": "angular-formly-templates-vanilla",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "author": "Astrism <[e-mail]>",
@@ -21,2 +21,5 @@ "contributors": [
   ],
+  "scripts": {
+    "build": "./node_modules/.bin/grunt build"
+  },
   "description": "Angular-Formly plugin which outputs plain html form fields.",
@@ -23,0 +26,0 @@ "dependencies": {

README.md

@@ -27,3 +27,3 @@ [![Build Status](https://travis-ci.org/formly-js/angular-formly.svg)](https://travis-ci.org/formly-js/angular-formly)
 
-### Demo : http://formly-js.github.io/angular-formly-templates-vanilla/
+### Demo http://formly-js.github.io/angular-formly
 
@@ -44,3 +44,5 @@ ## Dependencies
  `$ bower install angular-formly angular-formly-templates-vanilla --save`
+
  or
+
  `$ npm install angular-formly angular-formly-templates-vanilla --save`
@@ -51,6 +53,9 @@
  `<script src="bower_components/angular-formly-templates-vanilla/dist/angular-formly-templates-vanilla.min.js"></script>`
+
  and
+
  `angular.module('yourModule', ['formly', 'formlyVanilla']);`
 
  or
+
  `angular.module('yourModule', [require('angular-formly'), require('angular-formly-templates-vanilla')]);`
@@ -64,2 +69,4 @@
 
+NOTE: All of these properties will be under the `templateOptions` property as of angular-formly 3.0.0
+
 ---
@@ -110,6 +117,7 @@ ##### label (string)
 ### Form Fields
+
 Below is a detailed description of each form fields and its custom properties.
 
-#### Text form field
->The text field allows single line input with a input element set to `type='text'`. It doesn't have any custom properties.
+#### Input form field
+>The input uses the <input> element and allows you to specify it's type via the type property
 
@@ -123,4 +131,7 @@ ##### default (string, optional)
 		"key": "firstName",
-		"placeholder": "jane doe",
-		"label": "First name"
+		"templateOptions": {
+		  "type": "email", // or url, or text, etc.
+      "placeholder": "jane doe",
+      "label": "First name"
+		}
 	}
@@ -136,3 +147,3 @@ ```
 ##### lines (number, optional)
->`lines` sets the rows attribute for the textarea element. If unset, the default is 2 lines.
+>`lines` sets the rows attribute for the textarea element.
 
@@ -144,5 +155,8 @@ _Example textarea field_
 		"key": "about",
-		"placeholder": "I like puppies",
-		"label": "Tell me about yourself",
-		"lines": 4
+		"templateOptions": {
+      "placeholder": "I like puppies",
+      "label": "Tell me about yourself",
+      "rows": 4,
+      "cols": 15
+		}
 	}
@@ -162,4 +176,5 @@ ```
 		"key": "checkThis",
-		"label": "Check this box",
-		"default": true
+		"templateUrl": {
+      "label": "Check this box"
+		}
 	}
@@ -180,18 +195,19 @@ ```
 		"type": "radio",
-		"label": "Have you tried EmberJs yet?",
-		"default": "no",
-		"options": [
-			{
-				"name": "Yes, and I love it!",
-				"value": "yesyes"
-			},
-			{
-				"name": "Yes, but I'm not a fan...",
-				"value": "yesno"
-			},
-			{
-				"name": "Nope",
-				"value": "no"
-			}
-		]
+		"templateOptions": {
+      "label": "Have you tried EmberJs yet?",
+      "options": [
+        {
+          "name": "Yes, and I love it!",
+          "value": "yesyes"
+        },
+        {
+          "name": "Yes, but I'm not a fan...",
+          "value": "yesno"
+        },
+        {
+          "name": "Nope",
+          "value": "no"
+        }
+      ]
+		}
 	}
@@ -215,45 +231,48 @@ ```
 		"type": "select",
-		"label": "How do you get around in the city",
-		"options": [
-			{
-				"name": "Car"
-			},
-			{
-				"name": "Helicopter"
-			},
-			{
-				"name": "Sport Utility Vehicle"
-			},
-			{
-				"name": "Bicycle",
-				"group": "low emissions"
-			},
-			{
-				"name": "Skateboard",
-				"group": "low emissions"
-			},
-			{
-				"name": "Walk",
-				"group": "low emissions"
-			},
-			{
-				"name": "Bus",
-				"group": "low emissions"
-			},
-			{
-				"name": "Scooter",
-				"group": "low emissions"
-			},
-			{
-				"name": "Train",
-				"group": "low emissions"
-			},
-			{
-				"name": "Hot Air Baloon",
-				"group": "low emissions"
-			}
-		]
+		"templateOptions": {
+      "label": "How do you get around in the city",
+      "options": [
+        {
+          "name": "Car"
+        },
+        {
+          "name": "Helicopter"
+        },
+        {
+          "name": "Sport Utility Vehicle"
+        },
+        {
+          "name": "Bicycle",
+          "group": "low emissions"
+        },
+        {
+          "name": "Skateboard",
+          "group": "low emissions"
+        },
+        {
+          "name": "Walk",
+          "group": "low emissions"
+        },
+        {
+          "name": "Bus",
+          "group": "low emissions"
+        },
+        {
+          "name": "Scooter",
+          "group": "low emissions"
+        },
+        {
+          "name": "Train",
+          "group": "low emissions"
+        },
+        {
+          "name": "Hot Air Baloon",
+          "group": "low emissions"
+        }
+      ]
+		}
 	}
 ```
 
+
 ---
@@ -271,8 +290,2 @@ #### Number form field
 
-##### minlength (number, optional)
->`minlength` sets minimum number of characters for the input. If a number less than this value it will not be submitted with the form. eg 1000 is 4 characters long and if `minlength` is set to 5, it would not be sent. Currently there is no error displayed to the user if they do not meet the requirement.
-
-##### maxlength (number, optional)
->`maxlength` sets maximum number of characters for the input. If a number is greater than this value it will not be submitted with the form. eg 1000 is 4 characters long and if `maxlength` is set to 2, it would not be sent. Currently there is no error displayed to the user if they do not meet the requirement.
-
 _Example number field_
@@ -283,56 +296,12 @@ ```json
 		"type": "number",
-		"label": "How much love?",
-		"default": 2,
-		"min": 0,
-		"max": 100,
-		"required": true
+		"templateOptions": {
+      "label": "How much love?",
+      "min": 0,
+      "max": 100,
+      "required": true
+		}
 	}
 ```
 
----
-#### Password form field
->The password field allows password input, it uses an input with `type='password'`.
-##### default (string, optional)
 
-##### trimWhitespace (boolean, optional)
-Unlike other formly fields, which use Angular's default setting to trim leading and trailing whitespace, the password field captures whitespace. You can override this by setting `trimWhitespace` to `true`.
-
-_Example password field_
-```json
-	{
-		"key": "password",
-		"type": "password",
-		"label": "Password"
-	}
-```
-
----
-#### Hidden form field
->The hidden field allows hidden input, it uses an input with `type='hidden'`.
-
-##### default (number or string, required)
-
-_Example password field_
-```json
-	{
-		"key": "hiddenCode",
-		"type": "hidden"
-	}
-```
-
----
-#### Email form field
->The email field allows email input, it uses an input with `type='email'`. Browsers will provide basic email address validation by default.
-
-##### default (string, optional)
-
-_Example password field_
-```json
-	{
-		"key": "email",
-		"type": "email",
-		"placeholder": "[e-mail]"
-	}
-```
-
 ## Contributing
@@ -339,0 +308,0 @@

src/modules/formlyVanilla.js

@@ -1,1 +0,72 @@
-angular.module('formlyVanilla', ['formly']);
+angular.module('formlyVanilla', ['formly'], function configFormlyVanilla(formlyConfigProvider) {
+  'use strict';
+
+  formlyConfigProvider.setWrapper([
+    {
+      name: 'vanillaLabel',
+      templateUrl: 'wrappers/formly-wrappers-vanilla-label.html'
+    }
+  ]);
+
+  var commonWrappers = ['vanillaLabel'];
+
+  angular.forEach(['radio', 'select'], function(fieldName) {
+    formlyConfigProvider.setType({
+      name: fieldName,
+      templateUrl: getFieldTemplateUrl(fieldName),
+      wrapper: commonWrappers
+    });
+  });
+  formlyConfigProvider.setType({
+    name: 'input',
+    template: '<input class="formly-field-input" ng-model="model[options.key]">',
+    wrapper: commonWrappers
+  });
+
+  // textarea has custom defaultOptions
+  formlyConfigProvider.setType({
+    name: 'textarea',
+    template: '<textarea class="formly-field-textarea" ng-model="model[options.key]"></textarea>',
+    wrapper: commonWrappers,
+    defaultOptions: {
+      data: {
+        ngModelAttributes: {rows: 'rows', cols: 'cols'}
+      }
+    }
+  });
+
+  // checkbox doesn't have a vanillaLabel wrapper
+  formlyConfigProvider.setType({
+    name: 'checkbox',
+    templateUrl: getFieldTemplateUrl('checkbox')
+  });
+
+  formlyConfigProvider.templateManipulators.preWrapper.push(function ariaDescribedBy(template, options, scope) {
+    if (options.templateOptions && angular.isDefined(options.templateOptions.description) &&
+      options.type !== 'radio' && options.type !== 'checkbox') {
+      var el = angular.element('<a></a>');
+      el.append(template);
+      var modelEls = angular.element(el[0].querySelectorAll('[ng-model]'));
+      if (modelEls) {
+        el.append(
+          '<p id="' + scope.id + '_description"' +
+              'class="help-block"' +
+              'ng-if="options.templateOptions.description">' +
+            '{{options.templateOptions.description}}' +
+          '</p>'
+        );
+        modelEls.attr('aria-describedby', scope.id + '_description');
+        return el.html();
+      } else {
+        return template;
+      }
+    } else {
+      return template;
+    }
+  });
+
+  function getFieldTemplateUrl(name) {
+    return 'fields/formly-field-' + name + '.html';
+  }
+
+});

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

27336

decreased by-43.04%

Number of package files

18

decreased by-41.94%

Lines of code

351

decreased by-34.39%

Number of lines in readme file

302

decreased by-9.31%

No dependency changes