angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms.
The `formly-form` directive and the `formlyConfig` service are very powerful and bring unmatched maintainability to your
@@ -30,6 +35,9 @@ application's forms.
From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.
+> **IMPORTANT:** This is the formly project for AngularJS (v1.x). If you're looking for an **Angular (v2+) alternative**, take a look at the [ngx-formly](https://github.com/formly-js/ngx-formly) project.
+
+
## [Learning](http://learn.angular-formly.com)
### Egghead.io Lessons
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 00000000..a88f54cb
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,12 @@
+const gulp = require('gulp')
+const replace = require('gulp-replace')
+
+// bump npm package version into package.js
+gulp.task('meteor', function() {
+ const pkg = require('./package.json')
+ const versionRegex = /(version\:\s*\')([^\']+)\'/gi
+
+ return gulp.src('package.js')
+ .pipe(replace(versionRegex, '$1' + pkg.version + "'"))
+ .pipe(gulp.dest('./'))
+})
diff --git a/other/karma.conf.es6.js b/other/karma.conf.es6.js
index ee894ff5..a37cf374 100644
--- a/other/karma.conf.es6.js
+++ b/other/karma.conf.es6.js
@@ -1,4 +1,5 @@
/* eslint-env node */
+require('argv-set-env')();
const path = require('path');
process.env.NODE_ENV = process.env.NODE_ENV || 'test';
@@ -19,7 +20,7 @@ module.exports = function(config) {
basePath: './',
frameworks: ['sinon-chai', 'chai', 'mocha', 'sinon'],
files: [
- 'node_modules/lodash/index.js',
+ 'node_modules/lodash/lodash.js',
'node_modules/api-check/dist/api-check.js',
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
@@ -53,4 +54,3 @@ function getReporters() {
}
return reps;
}
-
diff --git a/other/webpack.config.es6.js b/other/webpack.config.es6.js
index 80f6814c..ceaeab2d 100644
--- a/other/webpack.config.es6.js
+++ b/other/webpack.config.es6.js
@@ -1,4 +1,5 @@
/* eslint-env node */
+require('argv-set-env')();
const packageJson = require('../package.json');
const here = require('path-here');
@@ -95,7 +96,8 @@ function getProdConfig() {
plugins: _.union(getCommonPlugins(), [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
- new webpack.optimize.AggressiveMergingPlugin()
+ new webpack.optimize.AggressiveMergingPlugin(),
+ new webpack.optimize.UglifyJsPlugin()
])
};
}
@@ -103,7 +105,6 @@ function getProdConfig() {
function getTestConfig() {
const coverage = process.env.COVERAGE === 'true';
const ci = process.env.CI === 'true';
- console.log(process.env.CI);
return {
entry: './index.test.js',
module: {
diff --git a/package.js b/package.js
new file mode 100644
index 00000000..e8510962
--- /dev/null
+++ b/package.js
@@ -0,0 +1,23 @@
+/* global Package:false */
+// package metadata file for AtmosphereJS
+
+try {
+ Package.describe({
+ name: 'formly:angular-formly',
+ summary: 'angular-formly (official): forms for AngularJS',
+ version: '0.0.0-semantically-released.0',
+ git: 'https://github.com/formly-js/angular-formly.git',
+ })
+
+ Package.onUse(function(api) {
+ api.versionsFrom(['METEOR@1.0'])
+ // api-check
+ api.use('wieldo:api-check@7.5.5')
+ api.imply('wieldo:api-check')
+ // angular
+ api.use('angular:angular@1.4.0')
+ api.addFiles('dist/formly.js', 'client')
+ })
+} catch (e) {
+ //
+}
diff --git a/package.json b/package.json
index d104c404..890d705f 100644
--- a/package.json
+++ b/package.json
@@ -24,25 +24,29 @@
"main": "dist/formly.js",
"license": "MIT",
"scripts": {
- "build:dist": "cross-env NODE_ENV=development webpack --progress --colors",
- "build:prod": "cross-env NODE_ENV=production webpack --progress --colors",
+ "build:dist": "webpack --progress --colors --set-env-NODE_ENV=development",
+ "build:prod": "webpack --progress --colors --set-env-NODE_ENV=production",
"build": "npm run build:dist & npm run build:prod",
- "test": "cross-env COVERAGE=true NODE_ENV=test karma start --single-run",
- "test:ci": "CI=true COVERAGE=true NODE_ENV=test karma start --single-run",
- "test:watch": "cross-env COVERAGE=true NODE_ENV=test karma start",
- "test:debug": "cross-env NODE_ENV=test karma start --browsers Chrome",
- "start:mac": "npm run test:mac",
+ "eslint:test": "eslint -c other/test.eslintrc --ignore-pattern **/*.{test,mock}.js src/",
+ "eslint:src": "eslint -c other/src.eslintrc --ignore-pattern !**/*.{test,mock}.js src/",
+ "eslint": "npm run eslint:test -s && npm run eslint:src -s",
+ "test": "karma start --single-run --set-env-COVERAGE=true --set-env-NODE_ENV=test",
+ "test:watch": "karma start --set-env-COVERAGE=true --set-env-NODE_ENV=test",
+ "test:debug": "karma start --browsers Chrome --set-env-NODE_ENV=test",
"start": "npm run test:watch",
"check-coverage": "istanbul check-coverage --statements 93 --branches 89 --functions 92 --lines 92",
"report-coverage": "cat ./coverage/lcov.info | node_modules/.bin/codecov",
"commit": "git-cz",
- "prepublish": "npm run build",
- "postpublish": "publish-latest --user-email kent+formly-bot@doddsfamily.us --user-name formly-bot",
- "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+ "publish-latest": "publish-latest --user-email kent+formly-bot@doddsfamily.us --user-name formly-bot",
+ "meteor": "gulp meteor",
+ "semantic-release": "semantic-release pre && npm run build && npm run meteor && npm publish && npm run publish-latest && semantic-release post"
},
"config": {
"ghooks": {
- "commit-msg": "./node_modules/.bin/validate-commit-msg && npm t && npm run check-coverage"
+ "commit-msg": "validate-commit-msg && npm run eslint && npm t && npm run check-coverage"
+ },
+ "commitizen": {
+ "path": "node_modules/cz-conventional-changelog"
}
},
"description": "AngularJS directive which takes JSON representing a form and renders to HTML",
@@ -51,61 +55,60 @@
"api-check": "^7.0.0"
},
"devDependencies": {
- "angular": "1.4.7",
- "angular-mocks": "1.4.7",
- "api-check": "7.5.3",
+ "angular": "1.5.0",
+ "angular-mocks": "1.5.0",
+ "api-check": "7.5.5",
+ "argv-set-env": "1.0.1",
"babel": "5.8.23",
"babel-eslint": "4.1.3",
"babel-loader": "5.3.2",
- "chai": "3.3.0",
+ "chai": "3.5.0",
"codecov.io": "0.1.6",
- "commitizen": "1.0.5",
- "cracks": "3.1.1",
- "cross-env": "1.0.1",
- "cz-conventional-changelog": "1.1.4",
+ "commitizen": "2.7.2",
+ "cracks": "3.1.2",
+ "cz-conventional-changelog": "1.1.5",
"deindent": "0.1.0",
- "eslint": "1.6.0",
- "eslint-config-kentcdodds": "4.0.1",
- "eslint-loader": "1.0.0",
+ "eslint": "1.7.3",
+ "eslint-config-kentcdodds": "5.0.0",
+ "eslint-loader": "1.1.0",
"eslint-plugin-mocha": "1.0.0",
- "ghooks": "0.3.2",
- "http-server": "0.8.5",
+ "ghooks": "1.0.3",
+ "gulp": "3.9.1",
+ "gulp-replace": "0.5.4",
+ "http-server": "0.9.0",
"isparta": "3.1.0",
"isparta-loader": "1.0.0",
- "istanbul": "0.3.22",
- "karma": "0.13.10",
+ "istanbul": "0.4.2",
+ "karma": "0.13.22",
"karma-chai": "0.1.0",
- "karma-chrome-launcher": "0.2.0",
- "karma-coverage": "0.5.2",
- "karma-firefox-launcher": "0.1.6",
- "karma-mocha": "0.2.0",
+ "karma-chrome-launcher": "0.2.2",
+ "karma-coverage": "0.5.5",
+ "karma-firefox-launcher": "0.1.7",
+ "karma-mocha": "0.2.2",
"karma-sinon": "1.0.4",
- "karma-sinon-chai": "1.1.0",
+ "karma-sinon-chai": "1.2.0",
"karma-webpack": "1.7.0",
- "lodash": "3.10.1",
- "mocha": "2.3.3",
- "ng-annotate": "1.0.2",
- "ng-annotate-loader": "0.0.10",
- "node-libs-browser": "0.5.3",
+ "lodash": "4.6.1",
+ "lolex": "1.4.0",
+ "mocha": "2.4.5",
+ "ng-annotate": "1.2.1",
+ "ng-annotate-loader": "0.1.0",
+ "node-libs-browser": "1.0.0",
"path-here": "1.1.0",
"publish-latest": "1.1.2",
"raw-loader": "0.5.1",
"semantic-release": "4.3.5",
- "sinon": "1.17.1",
+ "sinon": "1.17.3",
"sinon-chai": "2.8.0",
- "uglify-loader": "1.2.0",
- "validate-commit-msg": "1.0.0",
- "webpack": "1.12.2",
- "webpack-notifier": "1.2.1"
+ "validate-commit-msg": "2.3.1",
+ "webpack": "1.12.14",
+ "webpack-notifier": "1.3.0"
},
"jspm": {
"peerDependencies": {
"angular": "*"
}
},
- "czConfig": {
- "path": "node_modules/cz-conventional-changelog"
- },
"release": {
"verfiyRelease": {
"path": "cracks",
diff --git a/src/angular-fix/index.js b/src/angular-fix/index.js
index 295917ef..73bddb97 100644
--- a/src/angular-fix/index.js
+++ b/src/angular-fix/index.js
@@ -1,9 +1,9 @@
// some versions of angular don't export the angular module properly,
// so we get it from window in this case.
-let angular = require('angular');
+let angular = require('angular')
/* istanbul ignore next */
if (!angular.version) {
- angular = window.angular;
+ angular = window.angular
}
-export default angular;
+export default angular
diff --git a/src/directives/formly-custom-validation.js b/src/directives/formly-custom-validation.js
index e991cb6f..a5a3271c 100644
--- a/src/directives/formly-custom-validation.js
+++ b/src/directives/formly-custom-validation.js
@@ -1,5 +1,5 @@
-import angular from 'angular-fix';
-export default formlyCustomValidation;
+import angular from 'angular-fix'
+export default formlyCustomValidation
// @ngInject
function formlyCustomValidation(formlyUtil) {
@@ -7,76 +7,76 @@ function formlyCustomValidation(formlyUtil) {
restrict: 'A',
require: 'ngModel',
link: function formlyCustomValidationLink(scope, el, attrs, ctrl) {
- const opts = scope.options;
- opts.validation.messages = opts.validation.messages || {};
+ const opts = scope.options
+ opts.validation.messages = opts.validation.messages || {}
angular.forEach(opts.validation.messages, (message, key) => {
opts.validation.messages[key] = () => {
- return formlyUtil.formlyEval(scope, message, ctrl.$modelValue, ctrl.$viewValue);
- };
- });
+ return formlyUtil.formlyEval(scope, message, ctrl.$modelValue, ctrl.$viewValue)
+ }
+ })
- const useNewValidatorsApi = ctrl.hasOwnProperty('$validators') && !attrs.hasOwnProperty('useParsers');
- angular.forEach(opts.validators, angular.bind(null, addValidatorToPipeline, false));
- angular.forEach(opts.asyncValidators, angular.bind(null, addValidatorToPipeline, true));
+ const useNewValidatorsApi = ctrl.hasOwnProperty('$validators') && !attrs.hasOwnProperty('useParsers')
+ angular.forEach(opts.validators, angular.bind(null, addValidatorToPipeline, false))
+ angular.forEach(opts.asyncValidators, angular.bind(null, addValidatorToPipeline, true))
function addValidatorToPipeline(isAsync, validator, name) {
- setupMessage(validator, name);
- validator = angular.isObject(validator) ? validator.expression : validator;
+ setupMessage(validator, name)
+ validator = angular.isObject(validator) ? validator.expression : validator
if (useNewValidatorsApi) {
- setupWithValidators(validator, name, isAsync);
+ setupWithValidators(validator, name, isAsync)
} else {
- setupWithParsers(validator, name, isAsync);
+ setupWithParsers(validator, name, isAsync)
}
}
function setupMessage(validator, name) {
- const message = validator.message;
+ const message = validator.message
if (message) {
opts.validation.messages[name] = () => {
- return formlyUtil.formlyEval(scope, message, ctrl.$modelValue, ctrl.$viewValue);
- };
+ return formlyUtil.formlyEval(scope, message, ctrl.$modelValue, ctrl.$viewValue)
+ }
}
}
function setupWithValidators(validator, name, isAsync) {
- const validatorCollection = isAsync ? '$asyncValidators' : '$validators';
+ const validatorCollection = isAsync ? '$asyncValidators' : '$validators'
ctrl[validatorCollection][name] = function evalValidity(modelValue, viewValue) {
- return formlyUtil.formlyEval(scope, validator, modelValue, viewValue);
- };
+ return formlyUtil.formlyEval(scope, validator, modelValue, viewValue)
+ }
}
function setupWithParsers(validator, name, isAsync) {
- let inFlightValidator;
+ let inFlightValidator
ctrl.$parsers.unshift(function evalValidityOfParser(viewValue) {
- const isValid = formlyUtil.formlyEval(scope, validator, ctrl.$modelValue, viewValue);
+ const isValid = formlyUtil.formlyEval(scope, validator, ctrl.$modelValue, viewValue)
if (isAsync) {
- ctrl.$pending = ctrl.$pending || {};
- ctrl.$pending[name] = true;
- inFlightValidator = isValid;
+ ctrl.$pending = ctrl.$pending || {}
+ ctrl.$pending[name] = true
+ inFlightValidator = isValid
isValid.then(() => {
if (inFlightValidator === isValid) {
- ctrl.$setValidity(name, true);
+ ctrl.$setValidity(name, true)
}
}).catch(() => {
if (inFlightValidator === isValid) {
- ctrl.$setValidity(name, false);
+ ctrl.$setValidity(name, false)
}
}).finally(() => {
- const $pending = ctrl.$pending || {};
+ const $pending = ctrl.$pending || {}
if (Object.keys($pending).length === 1) {
- delete ctrl.$pending;
+ delete ctrl.$pending
} else {
- delete ctrl.$pending[name];
+ delete ctrl.$pending[name]
}
- });
+ })
} else {
- ctrl.$setValidity(name, isValid);
+ ctrl.$setValidity(name, isValid)
}
- return viewValue;
- });
+ return viewValue
+ })
}
- }
- };
+ },
+ }
}
diff --git a/src/directives/formly-custom-validation.test.js b/src/directives/formly-custom-validation.test.js
index cc9dd4e6..68fd72a1 100644
--- a/src/directives/formly-custom-validation.test.js
+++ b/src/directives/formly-custom-validation.test.js
@@ -1,128 +1,128 @@
/* eslint no-unused-vars:0, max-len:0 */
-import _ from 'lodash';
-import angular from 'angular-fix';
+import _ from 'lodash'
+import angular from 'angular-fix'
-import testUtils from '../test.utils.js';
+import testUtils from '../test.utils.js'
-const {shouldWarnWithLog} = testUtils;
+const {shouldWarnWithLog} = testUtils
describe(`formly-custom-validation`, function() {
- let $compile, $timeout, $q, scope, $log, formlyConfig;
- const formTemplate = ``;
- beforeEach(window.module('formly'));
+ let $compile, $timeout, $q, scope, $log, formlyConfig
+ const formTemplate = ``
+ beforeEach(window.module('formly'))
beforeEach(inject((_$compile_, _$timeout_, _$q_, $rootScope, _$log_, _formlyConfig_) => {
- $compile = _$compile_;
- $timeout = _$timeout_;
- $q = _$q_;
- scope = $rootScope.$new();
- scope.options = {validation: {}, validators: {}, asyncValidators: {}};
- $log = _$log_;
- formlyConfig = _formlyConfig_;
- }));
+ $compile = _$compile_
+ $timeout = _$timeout_
+ $q = _$q_
+ scope = $rootScope.$new()
+ scope.options = {validation: {}, validators: {}, asyncValidators: {}}
+ $log = _$log_
+ formlyConfig = _formlyConfig_
+ }))
describe(`using parsers`, () => {
checkApi(formTemplate.replace(
`TEMPLATE`, ``
- ), angular.version.minor >= 3);
- });
+ ), angular.version.minor >= 3)
+ })
describe(`using $validators`, () => {
checkApi(formTemplate.replace(
`TEMPLATE`, ``
- ));
- });
+ ))
+ })
describe(`options.validation.messages`, () => {
it(`should convert all strings to functions`, () => {
scope.options.validation = {
messages: {
- isHello: `'"' + $viewValue + '" is not "hello"'`
- }
- };
+ isHello: `'"' + $viewValue + '" is not "hello"'`,
+ },
+ }
$compile(formTemplate.replace(
`TEMPLATE`, ``
- ))(scope);
+ ))(scope)
- expect(typeof scope.options.validation.messages.isHello).to.eq('function');
- const field = scope.myForm.field;
- field.$setViewValue('sup');
- expect(scope.options.validation.messages.isHello()).to.eq('"sup" is not "hello"');
- });
- });
+ expect(typeof scope.options.validation.messages.isHello).to.eq('function')
+ const field = scope.myForm.field
+ field.$setViewValue('sup')
+ expect(scope.options.validation.messages.isHello()).to.eq('"sup" is not "hello"')
+ })
+ })
function checkApi(template, versionThreeOrBetterAndEmulating) {
- const value = `hello`;
+ const value = `hello`
describe(`validators`, () => {
- const validate = doValidation.bind(null, template, 'hello', false);
+ const validate = doValidation.bind(null, template, 'hello', false)
it(`should pass if returning a string that passes`, () => {
- validate(`$viewValue === "${value}"`, true);
- });
+ validate(`$viewValue === "${value}"`, true)
+ })
it(`should fail if returning a string that fails`, () => {
- validate(`$viewValue !== "${value}"`, false);
- });
+ validate(`$viewValue !== "${value}"`, false)
+ })
it(`should pass if it's a function that passes`, () => {
- validate(viewValue => viewValue === value, true);
- });
+ validate(viewValue => viewValue === value, true)
+ })
it(`should fail if it's a function that fails`, () => {
- validate(viewValue => viewValue !== value, false);
- });
- });
+ validate(viewValue => viewValue !== value, false)
+ })
+ })
describe(`asyncValidators`, () => {
- const validate = doValidation.bind(null, template, 'hello', true);
+ const validate = doValidation.bind(null, template, 'hello', true)
it(`should pass if it's a function that returns a promise that resolves`, () => {
- validate(() => $q.when(), true);
- });
+ validate(() => $q.when(), true)
+ })
it(`should fail if it's a function that returns a promise that rejects`, () => {
- validate(() => $q.reject(), false);
- });
+ validate(() => $q.reject(), false)
+ })
it(`should be pending until the promise is resolved`, () => {
- const deferred = $q.defer();
- const deferred2 = $q.defer();
- scope.options.asyncValidators.isHello = () => deferred.promise;
- scope.options.asyncValidators.isHey = () => deferred2.promise;
- $compile(template)(scope);
- const field = scope.myForm.field;
- scope.$digest();
- field.$setViewValue(value);
-
- expect(field.$pending).to.exist;
- expect(field.$pending.isHello).to.be.true;
- expect(field.$pending.isHey).to.be.true;
+ const deferred = $q.defer()
+ const deferred2 = $q.defer()
+ scope.options.asyncValidators.isHello = () => deferred.promise
+ scope.options.asyncValidators.isHey = () => deferred2.promise
+ $compile(template)(scope)
+ const field = scope.myForm.field
+ scope.$digest()
+ field.$setViewValue(value)
+
+ expect(field.$pending).to.exist
+ expect(field.$pending.isHello).to.be.true
+ expect(field.$pending.isHey).to.be.true
// because in angular 1.3 they do some interesting stuff with $pending, so can only test $pending in 1.2
if (!versionThreeOrBetterAndEmulating) {
- deferred.resolve();
- scope.$digest();
+ deferred.resolve()
+ scope.$digest()
- expect(field.$pending).to.exist;
- expect(field.$pending.isHey).to.be.true;
- expect(field.$pending.isHello).to.not.exist;
+ expect(field.$pending).to.exist
+ expect(field.$pending.isHey).to.be.true
+ expect(field.$pending.isHello).to.not.exist
- deferred2.reject();
- scope.$digest();
- expect(field.$pending).to.not.exist;
+ deferred2.reject()
+ scope.$digest()
+ expect(field.$pending).to.not.exist
}
- });
- });
+ })
+ })
}
function doValidation(template, value, isAsync, validator, pass) {
if (isAsync) {
- scope.options.asyncValidators.isHello = validator;
+ scope.options.asyncValidators.isHello = validator
} else {
- scope.options.validators.isHello = validator;
+ scope.options.validators.isHello = validator
}
- $compile(template)(scope);
- const field = scope.myForm.field;
- scope.$digest();
- field.$setViewValue(value);
- scope.$digest();
- expect(field.$valid).to.eq(pass);
+ $compile(template)(scope)
+ const field = scope.myForm.field
+ scope.$digest()
+ field.$setViewValue(value)
+ scope.$digest()
+ expect(field.$valid).to.eq(pass)
}
-});
+})
diff --git a/src/directives/formly-field.js b/src/directives/formly-field.js
index d5949ac0..d98e3e9a 100644
--- a/src/directives/formly-field.js
+++ b/src/directives/formly-field.js
@@ -1,7 +1,7 @@
-import angular from 'angular-fix';
-import apiCheckFactory from 'api-check';
+import angular from 'angular-fix'
+import apiCheckFactory from 'api-check'
-export default formlyField;
+export default formlyField
/**
* @ngdoc directive
@@ -11,7 +11,7 @@ export default formlyField;
// @ngInject
function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyConfig,
formlyApiCheck, formlyUtil, formlyUsability, formlyWarn) {
- const {arrayify} = formlyUtil;
+ const {arrayify} = formlyUtil
return {
restrict: 'AE',
@@ -26,60 +26,139 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
fields: '=?',
formState: '=?',
formOptions: '=?',
- form: '=?' // TODO require form in a breaking release
+ form: '=?', // TODO require form in a breaking release
},
controller: FormlyFieldController,
- link: fieldLink
- };
+ link: fieldLink,
+ }
// @ngInject
function FormlyFieldController($scope, $timeout, $parse, $controller, formlyValidationMessages) {
- /* eslint max-statements:[2, 31] */
+ /* eslint max-statements:[2, 37] */
if ($scope.options.fieldGroup) {
- setupFieldGroup();
- return;
+ setupFieldGroup()
+ return
}
- const fieldType = getFieldType($scope.options);
- simplifyLife($scope.options);
- mergeFieldOptionsWithTypeDefaults($scope.options, fieldType);
- extendOptionsWithDefaults($scope.options, $scope.index);
- checkApi($scope.options);
+ const fieldType = getFieldType($scope.options)
+ simplifyLife($scope.options)
+ mergeFieldOptionsWithTypeDefaults($scope.options, fieldType)
+ extendOptionsWithDefaults($scope.options, $scope.index)
+ checkApi($scope.options)
// set field id to link labels and fields
// initalization
- setFieldIdAndName();
- setDefaultValue();
- setInitialValue();
- runExpressions();
- addValidationMessages($scope.options);
- invokeControllers($scope, $scope.options, fieldType);
+ setFieldIdAndName()
+ setDefaultValue()
+ setInitialValue()
+ runExpressions()
+ watchExpressions()
+ addValidationMessages($scope.options)
+ invokeControllers($scope, $scope.options, fieldType)
// function definitions
function runExpressions() {
+ const deferred = $q.defer()
// must run on next tick to make sure that the current value is correct.
- return $timeout(function runExpressionsOnNextTick() {
- const field = $scope.options;
- const currentValue = valueGetterSetter();
+ $timeout(function runExpressionsOnNextTick() {
+ const promises = []
+ const field = $scope.options
+ const currentValue = valueGetterSetter()
angular.forEach(field.expressionProperties, function runExpression(expression, prop) {
- const setter = $parse(prop).assign;
- const promise = $q.when(formlyUtil.formlyEval($scope, expression, currentValue, currentValue));
- promise.then(function setFieldValue(value) {
- setter(field, value);
- });
- });
- }, 0, false);
+ const setter = $parse(prop).assign
+ const promise = $q.when(formlyUtil.formlyEval($scope, expression, currentValue, currentValue))
+ .then(function setFieldValue(value) {
+ setter(field, value)
+ })
+ promises.push(promise)
+ })
+ $q.all(promises).then(function() {
+ deferred.resolve()
+ })
+ }, 0, false)
+ return deferred.promise
+ }
+
+ function watchExpressions() {
+ if ($scope.formOptions.watchAllExpressions) {
+ const field = $scope.options
+ const currentValue = valueGetterSetter()
+ angular.forEach(field.expressionProperties, function watchExpression(expression, prop) {
+ const setter = $parse(prop).assign
+ $scope.$watch(function expressionPropertyWatcher() {
+ return formlyUtil.formlyEval($scope, expression, currentValue, currentValue)
+ }, function expressionPropertyListener(value) {
+ setter(field, value)
+ }, true)
+ })
+ }
}
function valueGetterSetter(newVal) {
if (!$scope.model || !$scope.options.key) {
- return undefined;
+ return undefined
}
if (angular.isDefined(newVal)) {
- $scope.model[$scope.options.key] = newVal;
+ parseSet($scope.options.key, $scope.model, newVal)
+ }
+ return parseGet($scope.options.key, $scope.model)
+ }
+
+ function shouldNotUseParseKey(key) {
+ return angular.isNumber(key) || !formlyUtil.containsSelector(key)
+ }
+
+ function keyContainsArrays(key) {
+ return /\[\d{1,}\]/.test(key)
+ }
+
+ function deepAssign(obj, prop, value) {
+ if (angular.isString(prop)) {
+ prop = prop.replace(/\[(\w+)\]/g, '.$1').split('.')
+ }
+
+ if (prop.length > 1) {
+ const e = prop.shift()
+ obj[e] = obj[e] || (isNaN(prop[0])) ? {} : []
+ deepAssign(obj[e], prop, value)
+ } else {
+ obj[prop[0]] = value
+ }
+ }
+
+ function parseSet(key, model, newVal) {
+ // If either of these are null/undefined then just return undefined
+ if ((!key && key !== 0) || !model) {
+ return
+ }
+ // If we are working with a number then $parse wont work, default back to the old way for now
+ if (shouldNotUseParseKey(key)) {
+ // TODO: Fix this so we can get several levels instead of just one with properties that are numeric
+ model[key] = newVal
+ } else if (formlyConfig.extras.parseKeyArrays && keyContainsArrays(key)) {
+ deepAssign($scope.model, key, newVal)
+ } else {
+ const setter = $parse($scope.options.key).assign
+ if (setter) {
+ setter($scope.model, newVal)
+ }
+ }
+ }
+
+ function parseGet(key, model) {
+ // If either of these are null/undefined then just return undefined
+ if ((!key && key !== 0) || !model) {
+ return undefined
+ }
+
+ // If we are working with a number then $parse wont work, default back to the old way for now
+ if (shouldNotUseParseKey(key)) {
+ // TODO: Fix this so we can get several levels instead of just one with properties that are numeric
+ return model[key]
+ } else {
+ return $parse(key)(model)
}
- return $scope.model[$scope.options.key];
}
function simplifyLife(options) {
@@ -89,121 +168,126 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
extras: {},
data: {},
templateOptions: {},
- validation: {}
- });
+ validation: {},
+ })
// create $scope.to so template authors can reference to instead of $scope.options.templateOptions
- $scope.to = $scope.options.templateOptions;
- $scope.formOptions = $scope.formOptions || {};
+ $scope.to = $scope.options.templateOptions
+ $scope.formOptions = $scope.formOptions || {}
}
function setFieldIdAndName() {
if (angular.isFunction(formlyConfig.extras.getFieldId)) {
- $scope.id = formlyConfig.extras.getFieldId($scope.options, $scope.model, $scope);
+ $scope.id = formlyConfig.extras.getFieldId($scope.options, $scope.model, $scope)
} else {
- const formName = ($scope.form && $scope.form.$name) || $scope.formId;
- $scope.id = formlyUtil.getFieldId(formName, $scope.options, $scope.index);
+ const formName = ($scope.form && $scope.form.$name) || $scope.formId
+ $scope.id = formlyUtil.getFieldId(formName, $scope.options, $scope.index)
}
- $scope.options.id = $scope.id;
- $scope.name = $scope.options.name || $scope.options.id;
- $scope.options.name = $scope.name;
+ $scope.options.id = $scope.id
+ $scope.name = $scope.options.name || $scope.options.id
+ $scope.options.name = $scope.name
}
function setDefaultValue() {
- if (angular.isDefined($scope.options.defaultValue) && !angular.isDefined($scope.model[$scope.options.key])) {
- const setter = $parse($scope.options.key).assign;
- setter($scope.model, $scope.options.defaultValue);
+ if (angular.isDefined($scope.options.defaultValue) &&
+ !angular.isDefined(parseGet($scope.options.key, $scope.model))) {
+ parseSet($scope.options.key, $scope.model, $scope.options.defaultValue)
}
}
function setInitialValue() {
- $scope.options.initialValue = $scope.model && $scope.model[$scope.options.key];
+ $scope.options.initialValue = $scope.model && parseGet($scope.options.key, $scope.model)
}
function mergeFieldOptionsWithTypeDefaults(options, type) {
if (type) {
- mergeOptions(options, type.defaultOptions);
+ mergeOptions(options, type.defaultOptions)
}
- const properOrder = arrayify(options.optionsTypes).reverse(); // so the right things are overridden
+ const properOrder = arrayify(options.optionsTypes).reverse() // so the right things are overridden
angular.forEach(properOrder, typeName => {
- mergeOptions(options, formlyConfig.getType(typeName, true, options).defaultOptions);
- });
+ mergeOptions(options, formlyConfig.getType(typeName, true, options).defaultOptions)
+ })
}
function mergeOptions(options, extraOptions) {
if (extraOptions) {
if (angular.isFunction(extraOptions)) {
- extraOptions = extraOptions(options, $scope);
+ extraOptions = extraOptions(options, $scope)
}
- formlyUtil.reverseDeepMerge(options, extraOptions);
+ formlyUtil.reverseDeepMerge(options, extraOptions)
}
}
function extendOptionsWithDefaults(options, index) {
- const key = options.key || index || 0;
+ const key = options.key || index || 0
angular.extend(options, {
// attach the key in case the formly-field directive is used directly
key,
value: options.value || valueGetterSetter,
runExpressions,
resetModel,
- updateInitialValue
- });
+ updateInitialValue,
+ })
}
function resetModel() {
- $scope.model[$scope.options.key] = $scope.options.initialValue;
+ parseSet($scope.options.key, $scope.model, $scope.options.initialValue)
if ($scope.options.formControl) {
if (angular.isArray($scope.options.formControl)) {
angular.forEach($scope.options.formControl, function(formControl) {
- resetFormControl(formControl, true);
- });
+ resetFormControl(formControl, true)
+ })
} else {
- resetFormControl($scope.options.formControl);
+ resetFormControl($scope.options.formControl)
}
}
+ if ($scope.form) {
+ $scope.form.$setUntouched && $scope.form.$setUntouched()
+ $scope.form.$setPristine()
+ }
}
function resetFormControl(formControl, isMultiNgModel) {
if (!isMultiNgModel) {
- formControl.$setViewValue($scope.model[$scope.options.key]);
+ formControl.$setViewValue(parseGet($scope.options.key, $scope.model))
}
- formControl.$render();
- formControl.$setUntouched && formControl.$setUntouched();
- formControl.$setPristine();
+ formControl.$render()
+ formControl.$setUntouched && formControl.$setUntouched()
+ formControl.$setPristine()
// To prevent breaking change requiring a digest to reset $viewModel
if (!$scope.$root.$$phase) {
- $scope.$digest();
+ $scope.$digest()
}
}
function updateInitialValue() {
- $scope.options.initialValue = $scope.model[$scope.options.key];
+ $scope.options.initialValue = parseGet($scope.options.key, $scope.model)
}
function addValidationMessages(options) {
- options.validation.messages = options.validation.messages || {};
+ options.validation.messages = options.validation.messages || {}
angular.forEach(formlyValidationMessages.messages, function createFunctionForMessage(expression, name) {
if (!options.validation.messages[name]) {
options.validation.messages[name] = function evaluateMessage(viewValue, modelValue, scope) {
- return formlyUtil.formlyEval(scope, expression, modelValue, viewValue);
- };
+ return formlyUtil.formlyEval(scope, expression, modelValue, viewValue)
+ }
}
- });
+ })
}
function invokeControllers(scope, options = {}, type = {}) {
angular.forEach([type.controller, options.controller], controller => {
if (controller) {
- $controller(controller, {$scope: scope});
+ $controller(controller, {$scope: scope})
}
- });
+ })
}
function setupFieldGroup() {
- $scope.options.options = $scope.options.options || {};
- $scope.options.options.formState = $scope.formState;
+ $scope.options.options = $scope.options.options || {}
+ $scope.options.options.formState = $scope.formState
+ $scope.to = $scope.options.templateOptions
}
}
@@ -211,23 +295,23 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
// link function
function fieldLink(scope, el, attrs, formlyFormCtrl) {
if (scope.options.fieldGroup) {
- setFieldGroupTemplate();
- return;
+ setFieldGroupTemplate()
+ return
}
// watch the field model (if exists) if there is no parent formly-form directive (that would watch it instead)
if (!formlyFormCtrl && scope.options.model) {
- scope.$watch('options.model', () => scope.options.runExpressions(), true);
+ scope.$watch('options.model', () => scope.options.runExpressions(), true)
}
- addAttributes();
- addClasses();
+ addAttributes()
+ addClasses()
- const type = getFieldType(scope.options);
- const args = arguments;
- const thusly = this;
- let fieldCount = 0;
- const fieldManipulators = getManipulators(scope.options, scope.formOptions);
+ const type = getFieldType(scope.options)
+ const args = arguments
+ const thusly = this
+ let fieldCount = 0
+ const fieldManipulators = getManipulators(scope.options, scope.formOptions)
getFieldTemplate(scope.options)
.then(runManipulators(fieldManipulators.preWrapper))
.then(transcludeInWrappers(scope.options, scope.formOptions))
@@ -241,24 +325,24 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
'There was a problem setting the template for this field ',
scope.options,
error
- );
- });
+ )
+ })
function setFieldGroupTemplate() {
- checkFieldGroupApi(scope.options);
- el.addClass('formly-field-group');
- let extraAttributes = '';
+ checkFieldGroupApi(scope.options)
+ el.addClass('formly-field-group')
+ let extraAttributes = ''
if (scope.options.elementAttributes) {
extraAttributes = Object.keys(scope.options.elementAttributes).map(key => {
- return `${key}="${scope.options.elementAttributes[key]}"`;
- }).join(' ');
+ return `${key}="${scope.options.elementAttributes[key]}"`
+ }).join(' ')
}
- let modelValue = 'model';
- scope.options.form = scope.form;
+ let modelValue = 'model'
+ scope.options.form = scope.form
if (scope.options.key) {
- modelValue = `model['${scope.options.key}']`;
+ modelValue = `model['${scope.options.key}']`
}
- setElementTemplate(`
+ getTemplate(`