From 442dbd53b5c3732d77862438bdeba14f0b32bd5b Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Sun, 12 Jul 2015 07:49:00 -0700 Subject: [PATCH 01/11] Initial definition push. --- angular-formly/angular-formly-test.ts | 34 ++ angular-formly/angular-formly.d.ts | 445 ++++++++++++++++++++++++++ 2 files changed, 479 insertions(+) create mode 100644 angular-formly/angular-formly-test.ts create mode 100644 angular-formly/angular-formly.d.ts diff --git a/angular-formly/angular-formly-test.ts b/angular-formly/angular-formly-test.ts new file mode 100644 index 000000000..1aae390a5 --- /dev/null +++ b/angular-formly/angular-formly-test.ts @@ -0,0 +1,34 @@ +/// + +var app = angular.module('app', ['formly']); + +class AppController { + fields: AngularFormly.IFieldConfigurationObject[]; + constructor($scope: ng.IScope) { + var vm = this; + vm.fields = [ + { + field: 'label', + type: 'input', + templateOptions: { + maxlength: 8, + minlength: 3 + } + }, + { + field: 'project', + type: 'input', + defaultValue: 'Project 1', + templateOptions: { + placeholder: 'Enter a project name...' + } + }, + { + template: () => 'hello' + } + ] + } +} + +app.controller("AppController", AppController); + diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts new file mode 100644 index 000000000..d0b336bfd --- /dev/null +++ b/angular-formly/angular-formly.d.ts @@ -0,0 +1,445 @@ +// Type definitions for angular-formly 6.17.0 +// Project: https://github.com/formly-js/angular-formly +// Definitions by: Scott Hatcher +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module 'AngularFormly' { + export = AngularFormly; +} + +declare module AngularFormly { + + + /** + * see http://docs.angular-formly.com/docs/formly-expressions#expressionproperties-validators--messages + */ + interface IExpresssionFunction { + ($viewValue, $modelValue, scope): any; + } + + + /** + * This is part of the built-in formlyConfig templateManipulator called ngModelAttrsTemplateManipulator. + * This allows you to keep your templates very small and add custom behavior on at the type or field level. + * + * see http://docs.angular-formly.com/docs/ngmodelattrs + */ + interface INGModelAttrs { + [key: string]: { + attribute?: string; + expresssion?: string; + value?: string; + } + } + + + interface ITemplateManipulator { + (template, options, scope): string; + } + + + /** + * see http://docs.angular-formly.com/docs/ngmodelattrstemplatemanipulator + */ + interface ITemplateOptions { + + // both attribute or regular attribute + disabled?: boolean | string; + maxlength?: number | string; + minlength?: number | string; + pattern?: string; + required?: boolean | string; + + //attribute only + max?: number; + min?: number; + placeholder?: number | string; + tabindex?: number; + type?: string; + + //expression types + onBlur?: string; + onChange?: string; + onClick?: string; + onFocus?: string; + onKeydown?: string; + onKeypress?: string; + onKeyup?: string; + + [key: string]: any; + + } + + + /** + * see http://docs.angular-formly.com/docs/field-configuration-object#validators-object + */ + interface IValidator { + expression?: string | { (viewValue, modelValue): boolean }; + } + + + /** + * An object which has at least two properties called expression and listener. The watch.expression + * is added to the formly-form directive's scope (to allow it to run even when hide is true). You + * can specify a type ($watchCollection or $watchGroup) via the watcher.type property (defaults to + * $watch) and whether you want it to be a deep watch via the watcher.deep property (defaults to false). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#watcher-objectarray-of-watches + */ + interface IWatcher { + expression?: string | { (field, scope): boolean }; + listener: (field, newValue, oldValue, scope, stopWatching) => void; + type?: string; //Defaults to $watch but can be set to $watchCollection or $watchGroup + } + + + // see http://docs.angular-formly.com/docs/field-configuration-object + interface IFieldConfigurationObject { + + + /** + * The type of field to be rendered. This is the recommended method + * for defining fields. Types must be pre-defined using formlyConfig. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#type-string + */ + type?: string; + + + /** + * Can be set instead of type or templateUrl to use a custom html + * template form field. Recommended to be used with one-liners mostly + * (like a directive), or if you're using webpack with the ability to require templates :-) + * + * If a function is passed, it is invoked with the field configuration object and can return + * either a string for the template or a promise that resolves to a string. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#template-string--function + */ + template?: string | { (fieldConfiguration: IFieldConfigurationObject): string | ng.IPromise }; + + + /** + * Can be set instead of type or template to use a custom html template form field. Works + * just like a directive templateUrl and uses the $templateCache + * + * see http://docs.angular-formly.com/docs/field-configuration-object#templateurl-string--function + */ + templateUrl?: string | { (fieldConfiguration: IFieldConfigurationObject): string | ng.IPromise }; + + + /** + * Can be set instead of type or template to use a custom html template form field. Works + * just like a directive templateUrl and uses the $templateCache + * + * see http://docs.angular-formly.com/docs/field-configuration-object#key-string + */ + key?: string; + + + /** + * Use defaultValue to initialize it the model. If this is provided and the value of the + * model at compile-time is undefined, then the value of the model will be assigned to defaultValue. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#defaultvalue-any + */ + defaultValue?: any; + + + /** + * Uses ng-if. Whether to hide the field. Defaults to false. If you wish this to be conditional, use + * hideExpression. See below. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#hide-boolean + */ + hide?: boolean + + + /** + * This is similar to expressionProperties with a slight difference. You should (hopefully) never + * notice the difference with the most common use case. This is available due to limitations with + * expressionProperties and ng-if not working together very nicely. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#hideexpression-string--function + */ + hideExpression?: string | IExpresssionFunction; + + + /** + * By default, the model passed to the formly-field directive is the same as the model passed to the + * formly-form. However, if the field has a model specified, then it is used for that field (and that + * field only). In addition, a deep watch is added to the formly-field directive's scope to run the + * expressionProperties when the specified model changes. + * + * Note, the formly-form directive will allow you to specify a string which is an (almost) formly + * expression which allows you to define the model as relative to the scope of the form. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#model-object--string + */ + model?: Object | string; + + + /** + * An object where the key is a property to be set on the main field config and the value is an + * expression used to assign that property. The value is a formly expressions. The returned value is + * wrapped in $q.when so you can return a promise from your function :-) + * + * see http://docs.angular-formly.com/docs/field-configuration-object#expressionproperties-object + */ + expressionProperties?: { + [key: string]: string | IExpresssionFunction; + } + + + /** + * You can specify your own class that will be applied to the formly-field directive (or ng-form of + * a fieldGroup). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#classname-string + */ + className?: string; + + + /** + * This allows you to specify the id of your field (which will be used for its name as well unless + * a name is provided). Note, you can also override the id generation code using the formlyConfig + * extra called getFieldId. + * + * AVOID THIS + * If you don't have to do this, don't. Specifying IDs makes it harder to re-use things and it's + * just extra work. Part of the beauty that angular-formly provides is the fact that you don't need + * to concern yourself with making sure that this is unique. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#id-string + */ + id?: string; + + + /** + * If you wish to, you can specify a specific name for your ng-model. This is useful if you're posting + * the form to a server using techniques of yester-year. + * + * AVOID THIS + * If you don't have to do this, don't. It's just extra work. Part of the beauty that angular-formly + * provides is the fact that you don't need to concern yourself with stuff like this. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#name-string + */ + name?: string; + + + /** + * This is reserved for the developer. You have our guarantee to be able to use this and not worry about + * future versions of formly overriding your usage and preventing you from upgrading :-) + * + * see http://docs.angular-formly.com/docs/field-configuration-object#data-object + */ + data?: any; + + + /** + * This is reserved for the templates. Any template-specific options go in here. Look at your specific + * template implementation to know the options required for this. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#templateoptions-object + */ + templateOptions?: ITemplateOptions; + + + /** + * Allows you to specify custom template manipulators for this specific field. (use defaultOptions in a + * type configuration if you want it to apply to all fields of a certain type). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#templatemanipulator-object-of-arrays-of-functions + */ + templateManipulator?: { + [key: string]: ITemplateManipulator[]; + } + + + /** + * This makes reference to setWrapper in formlyConfig. It is expected to be the name of the wrapper. If + * given an array, the formly field template will be wrapped by the first wrapper, then the second, then + * the third, etc. You can also specify these as part of a type (which is the recommended approach). + * Specifying this property will override the wrappers for the type for this field. + * + * http://docs.angular-formly.com/docs/field-configuration-object#wrapper-string--array-of-strings + */ + wrapper?: string | string[]; + + + //TODO:Scott Figure out what this really does. + /** + * This is used by ngModelAttrsTemplateManipulator to automatically add attributes to the ng-model element + * of field templates. You will likely not use this often. This object is a little complex, but extremely + * powerful. It's best to explain this api via an example. For more information, see the guide on ngModelAttrs. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#ngmodelattrs-object + */ + ngModelAttrs?: any; + + + /** + * This is a great way to add custom behavior to a specific field. It is injectable with the $scope of the + * field, and anything else you have in your injector. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#controller-controller-name-as-string--controller-f + */ + controller?: string | { ($scope: ng.IScope, ...args): void }; + + + /** + * This allows you to specify a link function. It is invoked after your template has finished compiling. + * You are passed the normal arguments for a normal link function. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#link-link-function + */ + link?: ng.IDirectiveLinkFn; + + + /** + * Allows you to specify extra types to get options from. Duplicate options are overridden in later priority + * (index 1 will override index 0 properties). Also, these are applied after the type's defaultOptions and + * hence will override any duplicates of those properties as well. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#optionstypes-string--array-of-strings + */ + optionsTypes?: string | string[]; + + + //TODO:Scott Still need to define + /** + * Allows you to take advantage of ng-model-options directive. Formly's built-in templateManipulator (see + * below) will add this attribute to your ng-model element automatically if this property exists. Note, + * if you use the getter/setter option, formly's templateManipulator will change the value of ng-model + * to options.value which is a getterSetter that formly adds to field options. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#modeloptions + */ + modelOptions?: any; + + + /** + * Used to tell angular-formly to not attempt to add the formControl property to your object. This is useful + * for things like validation, but not necessary if your "field" doesn't use ng-model (if it's just a horizontal + * line for example). Defaults to undefined. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#noformcontrol-boolean + */ + noFormControl?: boolean; + + + /** + * An object which has at least two properties called expression and listener. The watch.expression is added + * to the formly-form directive's scope (to allow it to run even when hide is true). You can specify a type + * ($watchCollection or $watchGroup) via the watcher.type property (defaults to $watch) and whether you want + * it to be a deep watch via the watcher.deep property (defaults to false). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#watcher-objectarray-of-watches + */ + watcher?: IWatcher | IWatcher[]; + + + //TODO:Scott Look at defining validators as an Object to see if additional interface needs to be created + /** + * An object where the keys are the name of the validator and the values are Formly Expressions; + * + * Async Validation + * All function validators can return true/false/Promise. A validator passes if it returns true or a promise + * that is resolved. A validator fails if it returns false or a promise that is rejected. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#validators-object + */ + validators?: { + [key: string]: IValidator | string; + } + + + /** + * An object with a few useful properties mostly handy when used in combination with ng-messages + */ + validation?: { + + + /** + * A map of Formly Expressions mapped to message names. This is really useful when you're using ng-messages + * like in this example. + */ + messages?: { + [key: string]: IExpresssionFunction; + } + + + /** + * A boolean you as the developer can set to specify to force options.validation.errorExistsAndShouldBeVisible + * to be set to true when there are $errors. This is useful when you're trying to call the user's attention to + * some fields for some reason. + */ + show?: boolean; + + + /** + * This is set by angular-formly. This is a boolean indicating whether an error message should be shown. Because + * you generally only want to show error messages when the user has interacted with a specific field, this value + * is set to true based on this rule: field invalid && (field touched || validation.show) (with slight difference + * for pre-angular 1.3 because it doesn't have touched support). + */ + errorExistsAndShouldBeVisible?: boolean; + + } + + /** + * This is a getter/setter function for the value that your field is representing. Useful when using getterSetter: true + * in the modelOptions (in fact, if you don't disable the ngModelAttrsTemplateManipulator that comes built-in with formly, + * it will automagically change your field's ng-model attribute to use options.value. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#value-gettersetter-function + */ + value?(): any; //Getter + value?(val): void; //Setter + + + //ALL PROPERTIES BELOW ARE ADDED (So you should not be setting them yourself.) + + + /** + * This is the NgModelController for the field. It provides you with awesome stuff like $errors :-) + * + * see http://docs.angular-formly.com/docs/field-configuration-object#formcontrol-ngmodelcontroller + */ + formControl?: ng.IFormController; + + + /** + * Will reset the field's model and the field control to the last initialValue. This is used by the + * formly-form's options.resetModel function. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#resetmodel-function + */ + resetModel?: () => void; + + + /** + * Will reset the field's initialValue to the current state of the model. Useful if you load the model asynchronously. + * Invoke this when the model gets set. This is used by the formly-form's options.updateInitialValue function. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#updateinitialvalue-function + */ + updateInitialValue?: () => void; + + + /** + * It is not likely that you'll ever want to invoke this function. It simply runs the expressionProperties expressions. + * It is used internally and you shouldn't have to use it, but you can if you want to, and any breaking changes to the + * way it works will result in a major version change, so you can rely on its api. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#runexpressions-function + */ + runExpressions?: () => void; + + } + +} \ No newline at end of file From 700ec57d8b58c08827d2de0813417d77d7feb6f4 Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Mon, 13 Jul 2015 07:55:15 -0700 Subject: [PATCH 02/11] Allow custom bootstrap layout. --- angular-formly/angular-formly.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index d0b336bfd..0e2c7d920 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -440,6 +440,13 @@ declare module AngularFormly { */ runExpressions?: () => void; + + + ////////////////// BOOTSTRAP SPECIFIC /////////////////////// + fieldGroup?: IFieldConfigurationObject[]; + } + + } \ No newline at end of file From d48e140826129575610983b8e3e7c075c800393c Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Mon, 13 Jul 2015 08:00:46 -0700 Subject: [PATCH 03/11] Added a few other field types to test file. --- angular-formly/angular-formly-test.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/angular-formly/angular-formly-test.ts b/angular-formly/angular-formly-test.ts index 1aae390a5..4d4053823 100644 --- a/angular-formly/angular-formly-test.ts +++ b/angular-formly/angular-formly-test.ts @@ -15,6 +15,9 @@ class AppController { minlength: 3 } }, + { + template: '
' + }, { field: 'project', type: 'input', @@ -25,6 +28,24 @@ class AppController { }, { template: () => 'hello' + }, + { + type: 'input', + key: 'zip', + templateOptions: { + type: 'number', + label: 'Zip', + max: 99999, + min: 0, + pattern: '\\d{5}' + } + }, + { + type: 'checkbox', + key: 'happyUser', + templateOptions: { + label: 'Are you happy?' + } } ] } From 7f7ac2c2b115cff564dacf27225240e2478f954d Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Mon, 13 Jul 2015 08:43:43 -0700 Subject: [PATCH 04/11] Remove implicit any's. --- angular-formly/angular-formly.d.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index 0e2c7d920..807171d07 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -16,7 +16,7 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/formly-expressions#expressionproperties-validators--messages */ interface IExpresssionFunction { - ($viewValue, $modelValue, scope): any; + ($viewValue: any, $modelValue: any, scope: ng.IScope): any; } @@ -36,7 +36,7 @@ declare module AngularFormly { interface ITemplateManipulator { - (template, options, scope): string; + (template: string | HTMLElement, options: Object, scope: ng.IScope): string | HTMLElement; } @@ -77,7 +77,7 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/field-configuration-object#validators-object */ interface IValidator { - expression?: string | { (viewValue, modelValue): boolean }; + expression?: string | { (viewValue: any, modelValue: any): boolean }; } @@ -90,8 +90,9 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/field-configuration-object#watcher-objectarray-of-watches */ interface IWatcher { - expression?: string | { (field, scope): boolean }; - listener: (field, newValue, oldValue, scope, stopWatching) => void; + deep?: boolean; //Defaults to false + expression?: string | { (field: string, scope: ng.IScope): boolean }; + listener: (field: string, newValue: any, oldValue: any, scope: ng.IScope, stopWatching: Function) => void; type?: string; //Defaults to $watch but can be set to $watchCollection or $watchGroup } @@ -256,7 +257,8 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/field-configuration-object#templatemanipulator-object-of-arrays-of-functions */ templateManipulator?: { - [key: string]: ITemplateManipulator[]; + preWrapper: ITemplateManipulator[]; + postWrapper: ITemplateManipulator[]; } @@ -288,7 +290,7 @@ declare module AngularFormly { * * see http://docs.angular-formly.com/docs/field-configuration-object#controller-controller-name-as-string--controller-f */ - controller?: string | { ($scope: ng.IScope, ...args): void }; + controller?: string | { Function: void }; /** @@ -399,7 +401,7 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/field-configuration-object#value-gettersetter-function */ value?(): any; //Getter - value?(val): void; //Setter + value?(val: any): void; //Setter //ALL PROPERTIES BELOW ARE ADDED (So you should not be setting them yourself.) From d910496ddc910e8e9b15290780505ea3fb45cbd8 Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Tue, 14 Jul 2015 09:28:38 -0700 Subject: [PATCH 05/11] Extended definitions with info from formlyApiCheck. --- angular-formly/angular-formly-test.ts | 67 ++-- angular-formly/angular-formly.d.ts | 439 ++++++++++++++------------ 2 files changed, 286 insertions(+), 220 deletions(-) diff --git a/angular-formly/angular-formly-test.ts b/angular-formly/angular-formly-test.ts index 4d4053823..603840208 100644 --- a/angular-formly/angular-formly-test.ts +++ b/angular-formly/angular-formly-test.ts @@ -2,49 +2,76 @@ var app = angular.module('app', ['formly']); +interface IScope extends ng.IScope { + to: { label: string; } +} + class AppController { fields: AngularFormly.IFieldConfigurationObject[]; constructor($scope: ng.IScope) { var vm = this; vm.fields = [ { - field: 'label', + key: 'email', type: 'input', templateOptions: { - maxlength: 8, - minlength: 3 + label: 'Email', + required: true, + type: 'email', + maxlength: 10, + minlength: 6, + placeholder: 'example@example.com' } }, { - template: '
' - }, - { - field: 'project', + key: 'ip', type: 'input', - defaultValue: 'Project 1', + validators: { + ipAddress: { + expression: function(viewValue, modelValue) { + var value = modelValue || viewValue; + return /(\d{1,3}\.){3}\d{1,3}/.test(value); + }, + message: '$viewValue + " is not a valid IP Address"' + } + }, templateOptions: { - placeholder: 'Enter a project name...' + label: 'IP Address', + required: true, + type: 'text', + placeholder: '127.0.0.1', + }, + validation: { + messages: { + required: function($viewValue: any, $modelValue: any, scope: IScope) { + return scope.to.label + ' is required' + } + } } }, { - template: () => 'hello' - }, - { + key: 'mac', type: 'input', - key: 'zip', templateOptions: { - type: 'number', - label: 'Zip', - max: 99999, - min: 0, - pattern: '\\d{5}' + label: 'MAC Address', + required: true, + placeholder: '49-8A-BD-4E-00-1D', + pattern: '([0-9A-F]{2}[:-]){5}([0-9A-F]{2})' } }, { type: 'checkbox', - key: 'happyUser', + key: 'checked', templateOptions: { - label: 'Are you happy?' + label: 'Check this' + } + }, + { + key: 'checked2', + type: 'checkbox', + wrapper: null, + templateOptions: { + label: 'no wrapper here...' } } ] diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index 807171d07..b34cb1406 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -12,11 +12,46 @@ declare module 'AngularFormly' { declare module AngularFormly { + interface IFieldGroup { + data?: Object; + className?: string; + elementAttributes?: { [key: string]: string }; + fieldGroup: IFieldConfigurationObject[]; + form?: Object; + hide?: boolean; + hideExpression?: string | IExpresssionFunction; + key?: string | number; + model?: string | Object; + options?: IFormOptionsAPI + } + + + interface IFormOptionsAPI { + data?: Object; + fieldTransform?: Function; + formState?: Object; + removeChromeAutoComplete?: boolean; + resetModel?: Function; + templateManipulators?: ITemplateManipulators; + updateInitialValue?: Function; + wrapper?: string | string[]; + } + + /** * see http://docs.angular-formly.com/docs/formly-expressions#expressionproperties-validators--messages */ interface IExpresssionFunction { - ($viewValue: any, $modelValue: any, scope: ng.IScope): any; + ($viewValue: any, $modelValue: any, scope: Object): any; + } + + + interface IModelOptions { + updateOn?: string; + debounce?: number; + allowInvalid?: boolean; + getterSetter?: string; + timezone?: string; } @@ -26,19 +61,24 @@ declare module AngularFormly { * * see http://docs.angular-formly.com/docs/ngmodelattrs */ - interface INGModelAttrs { - [key: string]: { - attribute?: string; - expresssion?: string; - value?: string; - } - } + // interface INGModelAttrs { + // [key: string]: { + // attribute?: string; + // expresssion?: string; + // value?: string; + // } + // } interface ITemplateManipulator { (template: string | HTMLElement, options: Object, scope: ng.IScope): string | HTMLElement; } + interface ITemplateManipulators { + preWrapper?: ITemplateManipulator[]; + postWrapper?: ITemplateManipulator[]; + } + /** * see http://docs.angular-formly.com/docs/ngmodelattrstemplatemanipulator @@ -46,11 +86,11 @@ declare module AngularFormly { interface ITemplateOptions { // both attribute or regular attribute - disabled?: boolean | string; - maxlength?: number | string; - minlength?: number | string; + disabled?: boolean; + maxlength?: number; + minlength?: number; pattern?: string; - required?: boolean | string; + required?: boolean; //attribute only max?: number; @@ -68,6 +108,7 @@ declare module AngularFormly { onKeypress?: string; onKeyup?: string; + label?: string; [key: string]: any; } @@ -77,7 +118,8 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/field-configuration-object#validators-object */ interface IValidator { - expression?: string | { (viewValue: any, modelValue: any): boolean }; + expression: string | IExpresssionFunction; + message?: string | IExpresssionFunction; } @@ -91,8 +133,8 @@ declare module AngularFormly { */ interface IWatcher { deep?: boolean; //Defaults to false - expression?: string | { (field: string, scope: ng.IScope): boolean }; - listener: (field: string, newValue: any, oldValue: any, scope: ng.IScope, stopWatching: Function) => void; + expression?: string | { (field: string, scope: Object): boolean }; + listener: (field: string, newValue: any, oldValue: any, scope: Object, stopWatching: Function) => void; type?: string; //Defaults to $watch but can be set to $watchCollection or $watchGroup } @@ -100,45 +142,22 @@ declare module AngularFormly { // see http://docs.angular-formly.com/docs/field-configuration-object interface IFieldConfigurationObject { - /** - * The type of field to be rendered. This is the recommended method - * for defining fields. Types must be pre-defined using formlyConfig. + * This is a great way to add custom behavior to a specific field. It is injectable with the $scope of the + * field, and anything else you have in your injector. * - * see http://docs.angular-formly.com/docs/field-configuration-object#type-string + * see http://docs.angular-formly.com/docs/field-configuration-object#controller-controller-name-as-string--controller-f */ - type?: string; + controller?: string | Function; /** - * Can be set instead of type or templateUrl to use a custom html - * template form field. Recommended to be used with one-liners mostly - * (like a directive), or if you're using webpack with the ability to require templates :-) + * This is reserved for the developer. You have our guarantee to be able to use this and not worry about + * future versions of formly overriding your usage and preventing you from upgrading :-) * - * If a function is passed, it is invoked with the field configuration object and can return - * either a string for the template or a promise that resolves to a string. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#template-string--function + * see http://docs.angular-formly.com/docs/field-configuration-object#data-object */ - template?: string | { (fieldConfiguration: IFieldConfigurationObject): string | ng.IPromise }; - - - /** - * Can be set instead of type or template to use a custom html template form field. Works - * just like a directive templateUrl and uses the $templateCache - * - * see http://docs.angular-formly.com/docs/field-configuration-object#templateurl-string--function - */ - templateUrl?: string | { (fieldConfiguration: IFieldConfigurationObject): string | ng.IPromise }; - - - /** - * Can be set instead of type or template to use a custom html template form field. Works - * just like a directive templateUrl and uses the $templateCache - * - * see http://docs.angular-formly.com/docs/field-configuration-object#key-string - */ - key?: string; + data?: Object; /** @@ -150,6 +169,30 @@ declare module AngularFormly { defaultValue?: any; + /** + * You can specify your own class that will be applied to the formly-field directive (or ng-form of + * a fieldGroup). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#classname-string + */ + className?: string; + + + elementAttributes?: string; + + + /** + * An object where the key is a property to be set on the main field config and the value is an + * expression used to assign that property. The value is a formly expressions. The returned value is + * wrapped in $q.when so you can return a promise from your function :-) + * + * see http://docs.angular-formly.com/docs/field-configuration-object#expressionproperties-object + */ + expressionProperties?: { + [key: string]: string | IExpresssionFunction | IValidator; + } + + /** * Uses ng-if. Whether to hide the field. Defaults to false. If you wish this to be conditional, use * hideExpression. See below. @@ -169,6 +212,42 @@ declare module AngularFormly { hideExpression?: string | IExpresssionFunction; + /** + * This allows you to specify the id of your field (which will be used for its name as well unless + * a name is provided). Note, you can also override the id generation code using the formlyConfig + * extra called getFieldId. + * + * AVOID THIS + * If you don't have to do this, don't. Specifying IDs makes it harder to re-use things and it's + * just extra work. Part of the beauty that angular-formly provides is the fact that you don't need + * to concern yourself with making sure that this is unique. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#id-string + */ + id?: string; + + + initialValue?: any; + + + /** + * Can be set instead of type or template to use a custom html template form field. Works + * just like a directive templateUrl and uses the $templateCache + * + * see http://docs.angular-formly.com/docs/field-configuration-object#key-string + */ + key?: string | number; + + + /** + * This allows you to specify a link function. It is invoked after your template has finished compiling. + * You are passed the normal arguments for a normal link function. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#link-link-function + */ + link?: ng.IDirectiveLinkFn; + + /** * By default, the model passed to the formly-field directive is the same as the model passed to the * formly-form. However, if the field has a model specified, then it is used for that field (and that @@ -184,39 +263,14 @@ declare module AngularFormly { /** - * An object where the key is a property to be set on the main field config and the value is an - * expression used to assign that property. The value is a formly expressions. The returned value is - * wrapped in $q.when so you can return a promise from your function :-) + * Allows you to take advantage of ng-model-options directive. Formly's built-in templateManipulator (see + * below) will add this attribute to your ng-model element automatically if this property exists. Note, + * if you use the getter/setter option, formly's templateManipulator will change the value of ng-model + * to options.value which is a getterSetter that formly adds to field options. * - * see http://docs.angular-formly.com/docs/field-configuration-object#expressionproperties-object + * see http://docs.angular-formly.com/docs/field-configuration-object#modeloptions */ - expressionProperties?: { - [key: string]: string | IExpresssionFunction; - } - - - /** - * You can specify your own class that will be applied to the formly-field directive (or ng-form of - * a fieldGroup). - * - * see http://docs.angular-formly.com/docs/field-configuration-object#classname-string - */ - className?: string; - - - /** - * This allows you to specify the id of your field (which will be used for its name as well unless - * a name is provided). Note, you can also override the id generation code using the formlyConfig - * extra called getFieldId. - * - * AVOID THIS - * If you don't have to do this, don't. Specifying IDs makes it harder to re-use things and it's - * just extra work. Part of the beauty that angular-formly provides is the fact that you don't need - * to concern yourself with making sure that this is unique. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#id-string - */ - id?: string; + modelOptions?: IModelOptions; /** @@ -232,48 +286,6 @@ declare module AngularFormly { name?: string; - /** - * This is reserved for the developer. You have our guarantee to be able to use this and not worry about - * future versions of formly overriding your usage and preventing you from upgrading :-) - * - * see http://docs.angular-formly.com/docs/field-configuration-object#data-object - */ - data?: any; - - - /** - * This is reserved for the templates. Any template-specific options go in here. Look at your specific - * template implementation to know the options required for this. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#templateoptions-object - */ - templateOptions?: ITemplateOptions; - - - /** - * Allows you to specify custom template manipulators for this specific field. (use defaultOptions in a - * type configuration if you want it to apply to all fields of a certain type). - * - * see http://docs.angular-formly.com/docs/field-configuration-object#templatemanipulator-object-of-arrays-of-functions - */ - templateManipulator?: { - preWrapper: ITemplateManipulator[]; - postWrapper: ITemplateManipulator[]; - } - - - /** - * This makes reference to setWrapper in formlyConfig. It is expected to be the name of the wrapper. If - * given an array, the formly field template will be wrapped by the first wrapper, then the second, then - * the third, etc. You can also specify these as part of a type (which is the recommended approach). - * Specifying this property will override the wrappers for the type for this field. - * - * http://docs.angular-formly.com/docs/field-configuration-object#wrapper-string--array-of-strings - */ - wrapper?: string | string[]; - - - //TODO:Scott Figure out what this really does. /** * This is used by ngModelAttrsTemplateManipulator to automatically add attributes to the ng-model element * of field templates. You will likely not use this often. This object is a little complex, but extremely @@ -281,47 +293,12 @@ declare module AngularFormly { * * see http://docs.angular-formly.com/docs/field-configuration-object#ngmodelattrs-object */ - ngModelAttrs?: any; - - - /** - * This is a great way to add custom behavior to a specific field. It is injectable with the $scope of the - * field, and anything else you have in your injector. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#controller-controller-name-as-string--controller-f - */ - controller?: string | { Function: void }; - - - /** - * This allows you to specify a link function. It is invoked after your template has finished compiling. - * You are passed the normal arguments for a normal link function. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#link-link-function - */ - link?: ng.IDirectiveLinkFn; - - - /** - * Allows you to specify extra types to get options from. Duplicate options are overridden in later priority - * (index 1 will override index 0 properties). Also, these are applied after the type's defaultOptions and - * hence will override any duplicates of those properties as well. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#optionstypes-string--array-of-strings - */ - optionsTypes?: string | string[]; - - - //TODO:Scott Still need to define - /** - * Allows you to take advantage of ng-model-options directive. Formly's built-in templateManipulator (see - * below) will add this attribute to your ng-model element automatically if this property exists. Note, - * if you use the getter/setter option, formly's templateManipulator will change the value of ng-model - * to options.value which is a getterSetter that formly adds to field options. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#modeloptions - */ - modelOptions?: any; + ngModelAttrs?: { + attribute?: any; + bound?: any; + expression?: any; + value?: any; + }; /** @@ -335,29 +312,62 @@ declare module AngularFormly { /** - * An object which has at least two properties called expression and listener. The watch.expression is added - * to the formly-form directive's scope (to allow it to run even when hide is true). You can specify a type - * ($watchCollection or $watchGroup) via the watcher.type property (defaults to $watch) and whether you want - * it to be a deep watch via the watcher.deep property (defaults to false). + * Allows you to specify extra types to get options from. Duplicate options are overridden in later priority + * (index 1 will override index 0 properties). Also, these are applied after the type's defaultOptions and + * hence will override any duplicates of those properties as well. * - * see http://docs.angular-formly.com/docs/field-configuration-object#watcher-objectarray-of-watches + * see http://docs.angular-formly.com/docs/field-configuration-object#optionstypes-string--array-of-strings */ - watcher?: IWatcher | IWatcher[]; + optionsTypes?: string | string[]; - //TODO:Scott Look at defining validators as an Object to see if additional interface needs to be created /** - * An object where the keys are the name of the validator and the values are Formly Expressions; + * Can be set instead of type or templateUrl to use a custom html + * template form field. Recommended to be used with one-liners mostly + * (like a directive), or if you're using webpack with the ability to require templates :-) * - * Async Validation - * All function validators can return true/false/Promise. A validator passes if it returns true or a promise - * that is resolved. A validator fails if it returns false or a promise that is rejected. + * If a function is passed, it is invoked with the field configuration object and can return + * either a string for the template or a promise that resolves to a string. * - * see http://docs.angular-formly.com/docs/field-configuration-object#validators-object + * see http://docs.angular-formly.com/docs/field-configuration-object#template-string--function */ - validators?: { - [key: string]: IValidator | string; - } + template?: string | { (fieldConfiguration: IFieldConfigurationObject): string | ng.IPromise }; + + + /** + * Allows you to specify custom template manipulators for this specific field. (use defaultOptions in a + * type configuration if you want it to apply to all fields of a certain type). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#templatemanipulator-object-of-arrays-of-functions + */ + templateManipulators?: ITemplateManipulators; + + + /** + * This is reserved for the templates. Any template-specific options go in here. Look at your specific + * template implementation to know the options required for this. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#templateoptions-object + */ + templateOptions?: ITemplateOptions; + + + /** + * Can be set instead of type or template to use a custom html template form field. Works + * just like a directive templateUrl and uses the $templateCache + * + * see http://docs.angular-formly.com/docs/field-configuration-object#templateurl-string--function + */ + templateUrl?: string | { (fieldConfiguration: IFieldConfigurationObject): string | ng.IPromise }; + + + /** + * The type of field to be rendered. This is the recommended method + * for defining fields. Types must be pre-defined using formlyConfig. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#type-string + */ + type?: string; /** @@ -365,13 +375,21 @@ declare module AngularFormly { */ validation?: { + /** + * This is set by angular-formly. This is a boolean indicating whether an error message should be shown. Because + * you generally only want to show error messages when the user has interacted with a specific field, this value + * is set to true based on this rule: field invalid && (field touched || validation.show) (with slight difference + * for pre-angular 1.3 because it doesn't have touched support). + */ + errorExistsAndShouldBeVisible?: boolean; + /** * A map of Formly Expressions mapped to message names. This is really useful when you're using ng-messages * like in this example. */ messages?: { - [key: string]: IExpresssionFunction; + [key: string]: IExpresssionFunction | string; } @@ -382,17 +400,23 @@ declare module AngularFormly { */ show?: boolean; - - /** - * This is set by angular-formly. This is a boolean indicating whether an error message should be shown. Because - * you generally only want to show error messages when the user has interacted with a specific field, this value - * is set to true based on this rule: field invalid && (field touched || validation.show) (with slight difference - * for pre-angular 1.3 because it doesn't have touched support). - */ - errorExistsAndShouldBeVisible?: boolean; - } + + /** + * An object where the keys are the name of the validator and the values are Formly Expressions; + * + * Async Validation + * All function validators can return true/false/Promise. A validator passes if it returns true or a promise + * that is resolved. A validator fails if it returns false or a promise that is rejected. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#validators-object + */ + validators?: { + [key: string]: string | IExpresssionFunction | IValidator; + } + + /** * This is a getter/setter function for the value that your field is representing. Useful when using getterSetter: true * in the modelOptions (in fact, if you don't disable the ngModelAttrsTemplateManipulator that comes built-in with formly, @@ -404,6 +428,28 @@ declare module AngularFormly { value?(val: any): void; //Setter + /** + * An object which has at least two properties called expression and listener. The watch.expression is added + * to the formly-form directive's scope (to allow it to run even when hide is true). You can specify a type + * ($watchCollection or $watchGroup) via the watcher.type property (defaults to $watch) and whether you want + * it to be a deep watch via the watcher.deep property (defaults to false). + * + * see http://docs.angular-formly.com/docs/field-configuration-object#watcher-objectarray-of-watches + */ + watcher?: IWatcher | IWatcher[]; + + + /** + * This makes reference to setWrapper in formlyConfig. It is expected to be the name of the wrapper. If + * given an array, the formly field template will be wrapped by the first wrapper, then the second, then + * the third, etc. You can also specify these as part of a type (which is the recommended approach). + * Specifying this property will override the wrappers for the type for this field. + * + * http://docs.angular-formly.com/docs/field-configuration-object#wrapper-string--array-of-strings + */ + wrapper?: string | string[]; + + //ALL PROPERTIES BELOW ARE ADDED (So you should not be setting them yourself.) @@ -412,7 +458,7 @@ declare module AngularFormly { * * see http://docs.angular-formly.com/docs/field-configuration-object#formcontrol-ngmodelcontroller */ - formControl?: ng.IFormController; + formControl?: ng.IFormController | ng.IFormController[]; /** @@ -424,15 +470,6 @@ declare module AngularFormly { resetModel?: () => void; - /** - * Will reset the field's initialValue to the current state of the model. Useful if you load the model asynchronously. - * Invoke this when the model gets set. This is used by the formly-form's options.updateInitialValue function. - * - * see http://docs.angular-formly.com/docs/field-configuration-object#updateinitialvalue-function - */ - updateInitialValue?: () => void; - - /** * It is not likely that you'll ever want to invoke this function. It simply runs the expressionProperties expressions. * It is used internally and you shouldn't have to use it, but you can if you want to, and any breaking changes to the @@ -443,12 +480,14 @@ declare module AngularFormly { runExpressions?: () => void; - - ////////////////// BOOTSTRAP SPECIFIC /////////////////////// - fieldGroup?: IFieldConfigurationObject[]; + /** + * Will reset the field's initialValue to the current state of the model. Useful if you load the model asynchronously. + * Invoke this when the model gets set. This is used by the formly-form's options.updateInitialValue function. + * + * see http://docs.angular-formly.com/docs/field-configuration-object#updateinitialvalue-function + */ + updateInitialValue?: () => void; } - - } \ No newline at end of file From b22932b2efcb0f433b587df4bc6dccd30331c99a Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Tue, 14 Jul 2015 09:29:51 -0700 Subject: [PATCH 06/11] Removed unused interface. --- angular-formly/angular-formly.d.ts | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index b34cb1406..48f5c7bad 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -55,25 +55,11 @@ declare module AngularFormly { } - /** - * This is part of the built-in formlyConfig templateManipulator called ngModelAttrsTemplateManipulator. - * This allows you to keep your templates very small and add custom behavior on at the type or field level. - * - * see http://docs.angular-formly.com/docs/ngmodelattrs - */ - // interface INGModelAttrs { - // [key: string]: { - // attribute?: string; - // expresssion?: string; - // value?: string; - // } - // } - - interface ITemplateManipulator { (template: string | HTMLElement, options: Object, scope: ng.IScope): string | HTMLElement; } + interface ITemplateManipulators { preWrapper?: ITemplateManipulator[]; postWrapper?: ITemplateManipulator[]; From 2f073bda43831dc97bbb709028940f14e938f99b Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Tue, 14 Jul 2015 10:08:15 -0700 Subject: [PATCH 07/11] Added in optional bootstrap template option. Will need to pull out and place in bootstrap-templates definition if it expands much further. --- angular-formly/angular-formly.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index 48f5c7bad..b2520bc2c 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -94,7 +94,9 @@ declare module AngularFormly { onKeypress?: string; onKeyup?: string; + //Bootstrap types label?: string; + description?: string; [key: string]: any; } From 5f6361e360c2c5176213736eefceab4b77d93c1d Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Tue, 14 Jul 2015 10:45:53 -0700 Subject: [PATCH 08/11] Add asyncValidators. Added in 6.18.0. --- angular-formly/angular-formly.d.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index b2520bc2c..001f53767 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -1,4 +1,4 @@ -// Type definitions for angular-formly 6.17.0 +// Type definitions for angular-formly 6.18.0 // Project: https://github.com/formly-js/angular-formly // Definitions by: Scott Hatcher // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -130,6 +130,17 @@ declare module AngularFormly { // see http://docs.angular-formly.com/docs/field-configuration-object interface IFieldConfigurationObject { + + /** + * Added in 6.18.0 + * + * Demo + * see http://angular-formly.com/#/example/other/unique-value-async-validation + */ + asyncValidators: { + [key: string]: string | IExpresssionFunction | IValidator; + } + /** * This is a great way to add custom behavior to a specific field. It is injectable with the $scope of the * field, and anything else you have in your injector. From 0f38c90093459581a33ab8c84abc903eff1aeaf1 Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Tue, 14 Jul 2015 10:48:48 -0700 Subject: [PATCH 09/11] asyncValidators isn't required. --- angular-formly/angular-formly.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index 001f53767..8ce552c52 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -137,7 +137,7 @@ declare module AngularFormly { * Demo * see http://angular-formly.com/#/example/other/unique-value-async-validation */ - asyncValidators: { + asyncValidators?: { [key: string]: string | IExpresssionFunction | IValidator; } From 7706ea89164d07e8aca9d6de46111d1f488b17c7 Mon Sep 17 00:00:00 2001 From: Scott Date: Thu, 16 Jul 2015 08:56:54 -0700 Subject: [PATCH 10/11] Rename angular-formly-test.ts to angular-formly-tests.ts Renamed according to comply with repo standards. --- .../{angular-formly-test.ts => angular-formly-tests.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename angular-formly/{angular-formly-test.ts => angular-formly-tests.ts} (100%) diff --git a/angular-formly/angular-formly-test.ts b/angular-formly/angular-formly-tests.ts similarity index 100% rename from angular-formly/angular-formly-test.ts rename to angular-formly/angular-formly-tests.ts From ac1ca868dd29ec8a4e76926692cfbc180fcba4a3 Mon Sep 17 00:00:00 2001 From: Scott Hatcher Date: Thu, 16 Jul 2015 11:52:50 -0700 Subject: [PATCH 11/11] Expanded tests, defined formlyConfig, and defined formlyValidationMessages. --- angular-formly/angular-formly-tests.ts | 30 ++++++++- angular-formly/angular-formly.d.ts | 90 ++++++++++++++++++++++++-- 2 files changed, 114 insertions(+), 6 deletions(-) diff --git a/angular-formly/angular-formly-tests.ts b/angular-formly/angular-formly-tests.ts index 603840208..ef6a38463 100644 --- a/angular-formly/angular-formly-tests.ts +++ b/angular-formly/angular-formly-tests.ts @@ -6,11 +6,37 @@ interface IScope extends ng.IScope { to: { label: string; } } +class FormConfig { + constructor(formlyConfig: AngularFormly.IFormlyConfig, formlyValidationMessages: AngularFormly.IValidationMessages) { + formlyConfig.setWrapper({ + name: 'validation', + types: ['input', 'customInput'], + templateUrl: 'my-messages.html' + }); + + formlyValidationMessages.addStringMessage('required', 'This field is required'); + + formlyConfig.setType({ + name: 'customInput', + extends: 'input' + }); + } +} + class AppController { fields: AngularFormly.IFieldConfigurationObject[]; - constructor($scope: ng.IScope) { + constructor() { var vm = this; vm.fields = [ + { + key: 'firstName', + type: 'customInput', + templateOptions: { + required: true, + label: 'First Name', + foo: 'hi' + } + }, { key: 'email', type: 'input', @@ -43,7 +69,7 @@ class AppController { }, validation: { messages: { - required: function($viewValue: any, $modelValue: any, scope: IScope) { + required: function($viewValue: any, $modelValue: any, scope: AngularFormly.ITemplateScope) { return scope.to.label + ' is required' } } diff --git a/angular-formly/angular-formly.d.ts b/angular-formly/angular-formly.d.ts index 8ce552c52..8f76b3ccf 100644 --- a/angular-formly/angular-formly.d.ts +++ b/angular-formly/angular-formly.d.ts @@ -42,7 +42,7 @@ declare module AngularFormly { * see http://docs.angular-formly.com/docs/formly-expressions#expressionproperties-validators--messages */ interface IExpresssionFunction { - ($viewValue: any, $modelValue: any, scope: Object): any; + ($viewValue: any, $modelValue: any, scope: ITemplateScope): any; } @@ -56,7 +56,7 @@ declare module AngularFormly { interface ITemplateManipulator { - (template: string | HTMLElement, options: Object, scope: ng.IScope): string | HTMLElement; + (template: string | HTMLElement, options: Object, scope: ITemplateScope): string | HTMLElement; } @@ -121,8 +121,8 @@ declare module AngularFormly { */ interface IWatcher { deep?: boolean; //Defaults to false - expression?: string | { (field: string, scope: Object): boolean }; - listener: (field: string, newValue: any, oldValue: any, scope: Object, stopWatching: Function) => void; + expression?: string | { (field: string, scope: ITemplateScope): boolean }; + listener: (field: string, newValue: any, oldValue: any, scope: ITemplateScope, stopWatching: Function) => void; type?: string; //Defaults to $watch but can be set to $watchCollection or $watchGroup } @@ -489,4 +489,86 @@ declare module AngularFormly { } + /** + * + * + * see http://docs.angular-formly.com/docs/custom-templates#section-formlyconfig-settype-options + */ + interface ITypeOptions { + apiCheck?: { [key: string]: Function }; + apiCheckFunction?: string; //'throw' or 'warn + apiCheckInstance?: any; + apiCheckOptions?: Object; + defaultOptions?: IFieldConfigurationObject | Function; + controller?: Function | string | any[]; + data?: Object; + extends?: string; + link?: ng.IDirectiveLinkFn; + overwriteOk?: boolean; + name: string; + template?: Function | string; + templateUrl?: Function | string; + validateOptions?: Function; + wrapper?: string | string[]; + } + + interface IWrapperOptions { + apiCheck?: { [key: string]: Function }; + apiCheckFunction?: string; //'throw' or 'warn + apiCheckInstance?: any; + apiCheckOptions?: Object; + overwriteOk?: boolean; + name?: string; + template?: string; + templateUrl?: string; + types?: string[]; + validateOptions?: Function; + } + + interface IFormlyConfig { + setType(typeOptions: ITypeOptions): void; + setWrapper(wrapperOptions: IWrapperOptions): void; + + } + + interface ITemplateScopeOptions { + formControl: ng.IFormController | ng.IFormController[]; + templateOptions: ITemplateOptions; + validation: Object; + } + + /** + * see http://docs.angular-formly.com/docs/custom-templates#templates-scope + */ + interface ITemplateScope { + options: ITemplateScopeOptions; + //Shortcut to options.formControl + fc: ng.IFormController | ng.IFormController[]; + //all the fields for the form + fields: IFieldConfigurationObject[]; + //the form controller the field is in + form: any; + //The object passed as options.formState to the formly-form directive. Use this to share state between fields. + formState: Object; + //The id of the field. You shouldn't have to use this. + id: string; + //The index of the field the form is on (in ng-repeat) + index: number; + //the model of the form (or the model specified by the field if it was specified). + model: Object | string; + //Shortcut to options.validation.errorExistsAndShouldBeVisible + showError: boolean; + //Shortcut to options.templateOptions + to: ITemplateOptions; + } + + /** + * see http://docs.angular-formly.com/docs/formlyvalidationmessages#addtemplateoptionvaluemessage + */ + interface IValidationMessages { + addTemplateOptionValueMessage(name: string, prop: string, prefix: string, suffix: string, alternate: string): void; + addStringMessage(name: string, string: string): void; + messages: { [key: string]: ($viewValue: any, $modelValue: any, scope: ITemplateScope) => string }; + } + } \ No newline at end of file