Stable release - any requests?

[kamilkisiela]

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

[younessassassi]

Awesome Library!! Thank you for your hard work!

Is there a way to add the label to the slider, datepicker and radio? Right now, I am adding custom labels using a wrapper but it is not working as I wished. This is how I am doing it:

formlyConfigProvider.setWrapper({
            name: 'radioLabel',
            types: ['radio'],
            template: '<p class="formly-label">{{to.label}}</p>' +
                '<div flex><formly-transclude></formly-transclude></div>'
        });  

in my css:

.formly-label {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    line-height: 20px;
    padding: 2px 0 0 3px;
    font-weight: bold;
    font-size: 14px;
    margin: 18px 0 0 0;
    color: @formlyLabelColor;
}

@formlyLabelColor: rgba(0, 0, 0, 0.258824);

[kamilkisiela]

@younessassassi So basically, you want the label to be available in all types.

In angular-material, there is no label directive for slider, datepicker and radio so it would be an "extra" css, just for angular-formly-templates-material.

I'm going to think about it between Christmas and New Year's Eve

[younessassassi]

I have noticed that these widgets were missing the label directive in the angular material docs, and that is why I attempted to create my own. In practical terms, all input fields should be treated the same way. In my case, I would like my app users to be able to pick between different input types to generate a form so I have to provide the label for all the input types they have access to.

Have a happy holidays!

[seangwright]

Is the 'step' attribute for numerical inputs available? (see last example of 'donation amount' input on this page https://material.angularjs.org/latest/demo/input )

Edit--

I made a pull request #6 that includes passing the step, max and min attributes from the templateOptions to the input element template.

[kamilkisiela]

@sgwatgit No, step attribute for numerical inputs are not yet available.

[kamilkisiela]

@younessassassi I'm going to do something about labels you mentioned in few days after New Year's Eve.

[kamilkisiela]

@younessassassi I added label as a wrapper to slider, datepicker and radio as you wanted. This change is available in latest release (v0.13.0).

https://github.com/formly-js/angular-formly-templates-material/releases/tag/v0.13.0

There is a problem with atmospherejs.com and I cannot publish new version but npm package is available, also bower.

[younessassassi]

That is awesome! I will go check it out!

[TeChn4K]

Awesome work @kamilkisiela !! Thanks !

[kamilkisiela]

@TeChn4K thanks! :)

[TeChn4K]

@kamilkisiela Do you have any roadmap to the next releases ? What's your plan ? :)

[kamilkisiela]

@TeChn4K There was a roadmap but I recently removed it :) I think most of stuff is done, if something is missing feel free to post an issue.

There is one little thing which has to be done before releasing v1.0. It is a demo #5 :)

[younessassassi]

I am starting to use ng-messages, and I noticed that the date picker does not work with that out of the box. I had to add a validator expression as well as some css to get to work. It would be nice if it did not require the manual intervention.
I have not tried all of the fields yet with ng-messages. I will let you know if I notice anything else.

[kamilkisiela]

@younessassassi I'm going to look at it in few days :)

[kamilkisiela]

@younessassassi I think it is a angular-material issue. As you can see here.

The problem is that mdDatepicker is not changing $touched to true.

Try to click on placeholder, it won't work because $touched === false.

Here's funny part!
If you click on this line under the placeholder or somewhere else but not directly on placeholder, it will work and change $touched to true :)

I created also reproduction of this in angular-formly-material-templates.

http://codepen.io/kamilkisiela/pen/KVyxqx

---

EDIT:

There is an open issue in angular-material angular/material#6598
Someone has fixed it already angular/material#6722

[younessassassi]

Thank you @kamilkisiela. I hope the Angular Material team adds the fix soon.

[samcfc]

Hi,
really you work is amazing, I got in mind to study it all during my free-time,
besides where do you start with this? Is there any inspiration for angular-formly in another proggramming language maybe?

Now a technical one specific to formly-material about SELECT

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

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

Again thank you very much for this amazing tool <3

[younessassassi]

hi @kamilkisiela, how do you set a theme for the material component? 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?

[kamilkisiela]

@younessassassi
@samcfc

I've made separate issues for your questions.

[mikamusz]

Hi @kamilkisiela ,

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?

[kamilkisiela]

@mikamusz #31 :)

[tilwinjoy]

Hi,

I find myself in a situation where I need to create n number of checkboxes inside the same element created with a fieldGroup item. Similar thing is possible with radio buttons,

{
  type: "radio",
  key: "name",
  templateOptions: {
    label: "Name",
    theme: "custom",
    labelProp: "firstName",
    valueProp: "id",
    options: [
        {firstName: "Sarah", id: 1},
        {firstName: "Jessica", id: 2},
        {firstName: "Parker", id: 3}
    ]
  }
}

formly-bootstrap templates has multiCheckbox type. Basically a checkbox group will have a common label, followed by n number of checkboxes with their own labels. But I don't think this is possible with formly-material right now.

Can such feature be added to formly-material..?

---

I ended up copying the multicheckbox from bootstrap material template and adding it as a custom type.

[tilwinjoy]

Hi, angular material adds a * to the required labels when validation fails (via a md-required class). Can this feature be added..?

[kamilkisiela]

@tilwinjoy Currently I don't have time to keep adding new features to formly-material. I will be very happy if someone, maybe you can create a PR for it.

[horelvis]

Hi @kamilkisiela,
Are you working in this project or need help to continue this work?

[kamilkisiela]

@horelvis Sure, any help would be great! You can check this issue #41

I have so many different projects and without any support from the community for formlyMaterial, there is no point of maintaining it because I no longer use this package on daily basis.

[RedouaneM]

Hello Guys
I have a question please, I am new on angular and when I tried to install your directive with bower I have got ' ECONFLICT Unable to find suitable version for angular' I am working with angular 1.5.6
Thank you for your help

[tilwinjoy]

@RedouaneM bower/bower#866 http://stackoverflow.com/q/25915729/2333214