Comment from #4

I think that when multiple is false and that selection occurs, the list should collapse to make selection feel more natural.
@samcfc

Hello there,
I was wondering if there could be a dependency update for bower.

At the moment angular-formly-material#0.14.3 depends on angular-animate#~1.4.0 and angular-material#~1.0.0

This brings a lot of conflicts since I am using angularjs 1.5 (also 1.6 is out) and also angular material reached 1.1.

Hi,

I'm trying to display tabs with angular-formly-templates-material but it's not rendering? Please refer to this example: http://angular-formly.com/#/example/integrations/ui-bootstrap-tabs

Are tabs not supported yet? How can I add support for them?

Would appreciate any response.. thanks!

Hi all

My angular-formly forms is looking weird after upgrading. All my forms are now packed down to 50% of the view and seems to not care about columns. As the screenshot reveals the check boxes is not all left even though they are placed in columns. Here is a snippet of my code. Before upgrading the input fields and check boxes was all in 50% cols looking neat. Now its like all is pressed to the left.

Versions:
angular#1.4.9
angular-formly#7.3.9
angular-formly-material#0.14.0
angular-material#1.0.3

Any ideas what have broken this?

        vm.fields = [
            {
                "elementAttributes": {
                    layout: "row",
                    "layout-sm": "column"
                },
                "fieldGroup": [
                    {
                        "elementAttributes": {
                            //using empty flex tag because className with flex in each element does not work.
                            flex: ''
                        },
                        key: 'user_name',
                        type: 'input',
                        templateOptions: {
                            type: 'text',
                            label: 'Brugernavn',
                            required: true,
                            focus: true
                        }
                    },
                    {
                        "elementAttributes": {
                            flex: ''
                        },
                        key: 'email',
                        type: 'input',
                        templateOptions: {
                            type: 'email',
                            label: 'E-mail',
                            required: true
                        }
                    }]
            },
            {
                "elementAttributes": {
                    layout: "row",
                    "layout-sm": "column"
                },
                "fieldGroup": [
                    {
                        "elementAttributes": {
                            flex: ''
                        },
                        key: 'first_name',
                        type: 'input',
                        templateOptions: {
                            type: 'text',
                            label: 'Fornavn',
                            required: true
                        }
                    },
                    {
                        "elementAttributes": {
                            flex: ''
                        },
                        key: 'last_name',
                        type: 'input',
                        templateOptions: {
                            type: 'text',
                            label: 'Efternavn',
                            required: true
                        }
                    }]
            },
            {
                key: 'employee_no',
                type: 'input',
                templateOptions: {
                    type: 'number',
                    label: 'Medarbejdernummer',
                    required: true
                }
            },
            {
                "elementAttributes": {
                    layout: "column"
                },
                "fieldGroup": [
                    {
                        "elementAttributes": {
                            //using empty flex tag because className with flex in each element does not work.
                            flex: ''
                        },
                        template: '<h3>Ansvarsområder</h3>'
                    },
                    {
                        "elementAttributes": {
                            layout: "row",
                            "layout-sm": "column"
                        },
                        "fieldGroup": [
                            {
                                "elementAttributes": {
                                    flex: ''
                                },
                                type: 'checkbox',
                                key: 'admin_role',
                                templateOptions: {
                                    label: 'Administrator'
                                }
                            },
                            {
                                "elementAttributes": {
                                    flex: ''
                                },
                                type: 'checkbox',
                                key: 'high_pressure_inspector_role',
                                templateOptions: {
                                    label: 'Højtryksinspektør'
                                }
                            }]
                    },
                    {
                        "elementAttributes": {
                            layout: "row",
                            "layout-sm": "column"
                        },
                        "fieldGroup": [
                            {
                                "elementAttributes": {
                                    flex: ''
                                },
                                type: 'checkbox',
                                key: 'preparation_employee_role',
                                templateOptions: {
                                    label: 'Klargøringsmedarbejder'
                                }
                            },
                            {
                                "elementAttributes": {
                                    flex: ''
                                },
                                type: 'checkbox',
                                key: 'lpg_inspector_role',
                                templateOptions: {
                                    label: 'LPG inspektør'
                                }
                            }]
                    },
                    {
                        type: 'checkbox',
                        key: 'lpg_employee_role',
                        templateOptions: {
                            label: 'LPG medarbejder'
                        }
                    }]
            },

Hey guys, I wonder if anyone has work a "md-autocomplete" as a field. I've tried and does not work properly.

While there is a label on the datepicker it doesn't float like the input field types. The label should likely be the placeholder by default and then float as input fields do when there is a value.

I want to create a input box with the type password. Example :

input type="password"

Is there any way to do it?

Datepicker fields do not match up with input fields (when in a group).

there are several places where the code assumes that field.templateOptions is defined. This may not be the case (or it may be that some code adding templateOptions if is undefined is missing)

this obviously causes problems

A couple of examples of this are:

function ngModelAttrsTransformer : if (typeof field.templateOptions[name] !== 'undefined')

return field.type === 'input' && field.templateOptions.type === 'number';

etc

I'm trying to use formly material by a custom template without material. and like u can see on next picture apply to my input the material style, and that i don't want.
1

2

3

4

after this i removed de and it was a disaster. every time when i tried to test a validation, the validation error message was persistent on view although I turned with the validation rules, also display on console the message displayed on next pictures.
1

2

3

4

At last i close only the validation message between and was solve cause i asume that tag was needed by the console error, but that's not correct, cause is a semantic transgression. By the way, i'll use this form until you help me to find the correct form. Thanks anyway.
1

2

3

4

Hi!

I need to add an md-block class to md-input-container in order to make input wider, as seen in this demo: https://material.angularjs.org/HEAD/demo/input
Looks like there is no such template option currently.

Thanks.

I noticed that the onOpen and onClose functions for the select are not executed. The `md-on-open' attribute gets added, but it won't trigger the function.

<md-select ng-model="model[options.key]" md-on-open="options.templateOptions['onOpening']">

I think it should create the following html

<md-select  md-on-open="options.templateOptions['onOpening'](model[options.key], options, this, $event)">

I played around with the options, I noticed that the following will work:

{
    type: 'select',
    key: 'category',
    templateOptions: {
        label: 'Category',
        labelProp: 'name',
        valueProp: 'id',
        options: [],
        onOpening: function ($modelValue, $inputValue, scope) {
            console.log('Load options');
        }
    },
    ngModelAttrs: {
        onOpening: {
            statement: 'md-on-open'
        }
    }
}

So I assume that 'bound' has to be changed to 'statement'. See Codepen: http://codepen.io/BiteCodes/pen/mEOamo

Hi, material demo is not working, the below is mentioned url but not working.

http://formly-material.meteor.com

I am struggling to get an input field to fill the available space.

I have 2 "normal" md-inputs, and a formly-form to show the differences

            <div layout="row">
                <md-input-container flex="">
                    <label>Name</label>
                    <input ng-model="name">
                </md-input-container>
                <md-input-container flex="">
                    <label>Store result in</label>
                    <input ng-model="result">
                </md-input-container>
            </div>
           <formly-form flex="" model="inputData" fields="layout"></formly-form>

this gives this result:

as you can see, the 2 "normal" inputs fill the available space, whereas the formly form condenses them into a teeny-tiny space

Am I missing some attributes / properties ?

the demo on the website also seems to suggest a similar problem (formly fields condensed)

thanks

When I set a select field as required: true I have noticed that the validation error message appears and then quickly disappears when I tab into and then tab out of the select element without making a selection.

Here is an example field definition

{
    key: 'genres',
    type: 'select',
    templateOptions: {
        label: 'Genre',
        options: [{name: 'sci-fi'}, {name: 'mystery'}],
        labelProp: "name",
        valueProp: "name",
        required: true
    }
}

Here is a live example of this bug http://jsbin.com/yuvuwo/6/edit?html,js,output

Put your cursor in the first text field and then tab through each element until you reach the Submit button. You will notice that the message This field is required appears below the select field as you tab out of it but then it disappears again.

Note: If you tab through the fields a second time, the error is persisted when tabbing out of the select element.

Here is my global app config function where I specify under what conditions validation should appear

function config($locationProvider, formlyConfigProvider) {
        $locationProvider.html5Mode(true).hashPrefix('!');

        formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression = function($viewValue, $modelValue, scope) {
            return (scope.fc.$touched && scope.form.$submitted);
        };
    }

When using ng-messages directly I can set the display expression as
<ng-messages for="form.$submitted && form.myField.$error"> or <ng-messages for="searchForm.$submitted && searchForm.myField.$touched">.

Should formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression give me a way to interact with that for attribute on ng-messages?

Or in the case of the messages wrapper for these templates I want to be able to modify ng-messages="fc.$error" with errorExistsAndShouldBeVisibleExpression

How to replicate: Make multiple selections with select options '"multiple": true'. Click on the select field again then deselect all of the selections.

Result: Two labels are shown overlapping each other.

You can use the select demo to replicate the issue here:
http://formly-material.meteor.com/demo/select

When marking a select field as required, I'm seeing that the initial state of the field is always invalid. Here is a demonstration of this issue. Additonally, here is an example of an equivalent form using angular-formly-bootstrap which does work correctly.

Notice that on initial load, the select field in the material variant has "$valid": false,. Re-selecting the same option from the select dropdown then results in the label being marked red, since the field has now been touched. Finally, selecting a different option results in validation working correctly henceforth.

How do you use the flex attributes to make the inout fields scale automatically (according to flex nature)?

When I try to follod Ken's examples, but with angular-formly-templates-material I can't get the flex to work as intended. They instead are all given the min width, as they have here: http://formly-material.meteor.com/demo/input

Is there an example which shows how to add the flex to create an example such as in http://angular-formly.com/#/example/integrations/angular-material using this library?

Using npm:
"angular-formly": "^7.5.0",
"angular-formly-material": "^0.14.1",
"angular-material": "1.0.1",

We currently cannot disable individual options in the select component:

{
  type: "select",
  key: "name",
  templateOptions: {
    label: "Name",
    theme: "custom",
    multiple: true,
    labelProp: "firstName",
    valueProp: "id",
    options: [
        {firstName: "Sarah", id: 1, disabled: true},  // I need to display this option in a disabled state
        {firstName: "Jessica", id: 2},
        {firstName: "Parker", id: 3}
    ],
    onOpen: () => {
      console.log('select is opened');
    },
    onClose: () => {
      console.log('select is closed');
    }
  }
}

Hi,

thanks for this package, we've been using it a lot.

I am currently refactoring a project switching dependency management to webpack.

I see there's a whole lot of webpacking going on in the dist.

However, I cannot get this to work with require('angular-formly-material') using the latest release (0.14.1).

Error: [$injector:modulerr] Failed to instantiate module {"default":"formlyMaterial"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

Can you help me out here and provide webpack usage instructions? Thank you.

Hi guys,

First of all I'm new in formly material. Do you have any idea how I can build the multi select drop down? Currently I think it is not supported yet and I've tried modify using the formlyConfig but not able to do it. Could you please advise?

Because I want to add autocomplete to md-chips, I forked your repo.

However, if I run npm run build I get the following error (from build:prod):

ERROR in dist/formly-material.min.js from UglifyJs
Unexpected token: name (angular) [./src/index.js:1,0]

Any idea about what is going wrong?

Hello.
The newest release version shows 0.14.2, but the tag shows 0.14.3.
Please check it, thanks!

Hi, Why is there a hard dependency on angular ~1.4.0, and others..? Does this break with higher versions..? Is it possible to support higher versions like 1.5.x..?

Things to be done:

• codepen.io template (here)
• base
• example for each type
• example for each wrapper
• example for each template manipulator
• live edit

Feel free to contribute. How to add an example?

Browser reports "can't find the server at formly-material.meteor.com" when trying to follow link from README.md

tracert formly-material.meteor.com also says Unable to resolve target system name...

http://formly-material.meteor.com/demo/input is unaccessible

I need to use onChange to update the label with important information. But I also need to validate on behalf of a global boolean that changes. I have this example jsbin and if the validators object is uncommented, onChange is no longer responding.

Setting formState.disabled to true should disable all input fields in the form. When using angular-formly-templates-material this setting has no effect tough:

    vm.options = {
      formState: {
        disabled: true
      }
    };

All input field stay enabled.
See http://jsbin.com/yatewi/edit?html,js,output

Hi,

it is possible to update this awesome package to support Angular Material v1.0.0?

Is there a way to bind to ng-pattern on the field definition? Thanks.

Hi there,

I tried to use the material templates, but when I try to use it grouping fields to get like 3 fields in the same row, I don't see how can I set the width for the fields, so when it renders, I get this:

and this is my configuration:

{
                elementAttributes: {
                    "layout": "row"
                },
                fieldGroup: [
                    {
                        key: 'existId',
                        type: 'select',
                        templateOptions: {
                            label: "¿Presenta documento de identificación?",
                            placeholder: 'Seleccione..',
                            options: [
                                {key: 'default', value: labelsContact.options.defaultSelect},
                                {key: '1', value: labelsContact.options.yes},
                                {key: '2', value: labelsContact.options.no},
                                {key: '3', value: labelsContact.options.process}
                            ],
                            valueProp: 'key',
                            labelProp: 'value',
                            "required": true

                        },
                        validators: selectDefaultValidator
                    },
                    {
                        key: 'idType',
                        type: 'select',
                        templateOptions: {
                            label: "",
                            placeholder: 'Seleccione..',
                            options: [],
                            valueProp: 'key',
                            labelProp: 'value',
                            "required": true
                        }
                    },
                    {
                        key: 'idNumber',
                        type: 'input',
                        templateOptions: {
                            label: labelsContact.fields.idNumber,
                            "required": true
                        }
                    }
                ]
            }

How can I handle this with material templates?

Thanks.

Comment from #4

defaultValue is not working or am I missing something, could you provide a quick example if it does work ?
@samcfc

I see many PR and issues open with no answer and I see a lack of implementations that many community members would be able to implement and fix.

I think most of stuff from angular-material that is useful in forms is now supported by formlyMaterial.

Code is now fully covered. I recently added few more tests to accomplish that. In few days, I'm going to add a demo app with basic examples, maybe with live reload.

Has anyone any requests? Maybe I've forgot about something that has to be done.

@stefanmeschke do you need something to improve or change before stable version will be released?

TODO:

• support for ngPattern in input
• support for showError
• label for all types
• templateOptions.disabled for all types
• auto publishing for meteor
• auto publishing for npm

This is, I feel, as much an oversight from the angular material team themselves as it is with your templates, but here goes:

On normal inputs, everything gets wrapped in an md-input-container, including the ng-messages block. Then error classes are bubbled up to md-input-container, which allows for an easy cascade of styling, because the ng-messages block inherits the classes whenever there's an error.

Being incompatible with the md-input-container, the md-datepicker is kind of left out in the cold, and with a default theme applied its error messages don't show proper styling.

JSbin: here

With some fairly trivial CSS, I'm able to style a similarly-situated vanilla datepicker with the sibling attribute selector.

md-datepicker.ng-invalid ~ [ng-messages],
md-datepicker.ng-invalid ~ [ng-messages] [ng-messages-exp]{
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  transition: all .3s cubic-bezier(.55,0,.55,.2);
  opacity: 1;
  margin-top: 0;
  padding-top: 5px;
}

md-datepicker.ng-invalid ~ [ng-messages],
md-datepicker.ng-invalid ~ [ng-messages] [ng-messages-exp]{
  color: rgb(221,44,0);
}

But this fragile solution doesn't work on the formly material datepicker, because of the additional wrapper div in its template. (Which seems to have, perhaps, been intended to receive the ng error classes, but didn't...?)

What I've done as an inadequate patch is just force all ng-messages within the formly-field-datepicker div to always be the 'alert' color... but this is a sad monkey-patch, for a problem that must surely be affecting more than just me. :(

Is there any way to add Hints to the text input fields?
See Errors Advanced section: https://material.angularjs.org/latest/demo/input

Hi guys.

I try to add error messages on my app but the red animation error doesn't work .
Indeed, it work when I make a simple example like : http://jsbin.com/rexuquqeta/edit?js,console,output

• Basically, I have a page that displays a grid on which I use a ng-repeat .

• Inside each " tile " I dynamically displays data as text .

• Each " tile " is a button that opens a modal .

• When I click on a " tile " , so I open a modal which displays editable data as " input " .

• Except that my problem is that the error messages do not fontionnent with my current structure .

• Here is an overview :

      vm.tiles = [
          /* State */
          {
              span: {row: 2, col: 1},
              background: 'yellow',
              title: 'State',
              model: {
                  state: vm.details.state,
                  name: vm.details.name,
                  description: vm.details.description
              },
              fields: [
                  {
                      key: 'state',
                      type: 'detailsCenter',
                      templateOptions: {}
                  },
                  {
                      key: 'name',
                      type: 'details',
                      templateOptions: {
                          label: 'Name : '
                      }
                  },
                  {
                      key: 'description',
                      type: 'details2lines',
                      templateOptions: {
                          label: 'Description : '
                      }
                  }
              ],
              fieldsModal: [
                  {
                      elementAttributes: {
                          layout: 'row',
                          'layout-sm': 'column',
                          'layout-xs': 'column'
                      },
                      fieldGroup: [
                          {
                              key: 'state',
                              type: 'detailsCenter',
                              templateOptions: {}
                          }
                      ]
                  },
                  {
                      elementAttributes: {
                          layout: 'row',
                          'layout-sm': 'column',
                          'layout-xs': 'column'
                      },
                      fieldGroup: [
                          {
                              key: 'name',
                              className: 'flex-xs-100 flex-sm-100 flex-100',
                              type: 'input',
                              templateOptions: {label: 'Name : ', 'required': true}
                          },
                          {
                              key: 'description',
                              className: 'flex-xs-100 flex-sm-100 flex-100',
                              type: 'input',
                              templateOptions: {label: 'Description : ', 'required': true}
                          }
                      ]
                  }
              ]
          }, ...
  

If you have an idea what it could be ?

Nb: if you want more informations, say it to me .. thanks a lot for your help

I don't have much free time to spend it on fixing bugs and investigating all of the issues on formlyMaterial but I'm always available for accepting PRs! 👌

So if anyone wants to create a pull request then I will be ready to check it and eventually merge it in couple of minutes.

I can also help you with fixing bugs or adding new features. You can message me on gitter or hangouts (mys.sterowiec) or even using oldie but goldie e-mail

It's an open source library so any help will be appreciated 👍

I've a custom field using ui.bootstrap datepicker. The option.type is "datepicker" so it doesn't work with this line here:

module.exports = "<label for=\"{{id}}\" ng-style=\"['input', 'textarea', 'select'].indexOf(options.type) === -1 && {'font-size':'12px', 'color': 'rgb(117, 117, 117)'}\">\n {{to.label}}\n</label>\n<formly-transclude></formly-transclude>\n";

I had to manually add my field to the array on ng-style so the label will work as expected.

module.exports = "<label for=\"{{id}}\" ng-style=\"['input', 'textarea', 'select', 'datepicker'].indexOf(options.type) === -1 && {'font-size':'12px', 'color': 'rgb(117, 117, 117)'}\">\n {{to.label}}\n</label>\n<formly-transclude></formly-transclude>\n";

Is there any other way to deal with this? I understand it's nessesary because of checkboxes or radios. But it ends up limiting my avility to extend and create more fields.

Thank you.

It would be very useful to be able to add ng-readonly attribute to some (all) generated input tags. I figured no way to do that by some "hack". It differs from "disable" visually by color (at least). Making full form readOnly in firmly style does not seem to work in material version, perhaps only in bootstrap.

How can I show a label for radio groups? The label property doesn't seem to work. Thanks.

I have this:

          {
                type: "select",
                key: "categories",
                templateOptions: {
                    label: "Category",
                    multiple: false,
                    labelProp: "option",
                    valueProp: "id",
                    options: [
                        {option: "first", id: 1},
                        {option: "second", id: 2}
                    ], 
                     onOpen: function () {
                        console.log('select is opened');
                    },
                }

The onOpen function is not firing (same for onClose)

Comment from #4

Your documentation shows that you can set a theme for each field, but I was not able to get it to work. Is there an example somewhere that I can follow?
@younessassassi

Reproduction