Should be able to handle varying options for flex layouts to replace the Boostrap decorator's grid.

Update select to include more features from AM including dynamic options

Options will be loadable in a manner similar to https://github.com/Anthropic/angular-schema-form-external-options#LocalData

The form doesn't show values of model until click input.

After some investigation I saw that the element md-input-container doesn't have the css class md-input-has-value when the field has value from model.

Also, some of the options like fieldAddonLeft are not available in the templates of the inputs.
The decorator needs to be updated with the new options.

Here is my plunker to demonstrate what I am saying: https://plnkr.co/edit/835TaC61a6O88r7TDuOM?p=preview

Scott added a name to the form, swapped to bootstrap, and moved the titleMaps to the UI form schema from the JSON schema to indicate that it does look like material needs to be updated.
https://plnkr.co/edit/2C1HOB3o9Do8jUVo3Hau?p=preview

On angularJS this onClick event will work.

 {
     "type": "button",
     "style": "btn-danger",
    "title": "No",
    "onClick":  "sayNo()"
}

But not with angular-schema-form-material.

I would like to contribute and use it at the same time..

I created an exemple to reproduce the behavior.
http://codepen.io/anon/pen/RRVQpv?editors=1010

If the input overextends the limit we have three errors

{
  "schemaForm": true,
  "md-maxlength": true,
  "tv4-201": true
}

If we remove some characters until we reach the limit, 200 characters in my example.
The field remains invalid.

Proposition :
I think the problem comes from a remaining schemaForm error set by angular-schema-form.
I looked at its code and I saw two interesting lines used for validation :

// Any error and we're out of here!
return !Object.keys(ngModel.$error).some(function(e) { return e !== 'schemaForm';});

// In Angular 1.3 we use one $validator to stop the model value from getting updated.
// this means that we always end up with a 'schemaForm' error.
errors = errors.filter(function(e) { return e !== 'schemaForm'; });

Changing e !== 'schemaForm'; by error.indexOf('tv4-') === 0 fixed the problem.
Basically if we don't have an error from tv4 validation, we ignore it.
(It also fixes an error on textarea error messages because md-maxlength error is also ignored. I'll have a PR for this soon)

However I guess it breaks any custom validation --> https://github.com/json-schema-form/angular-schema-form/blob/development/docs/index.md#custom-validation

Does anyone have a better fix idea for this problem ?

The datepicker is not working. When the date is selected from the datepicker the form always stays as invalid. I tried it using angular-material 1.0.7.

I also clone the repo and tried the "simple" example that fails too.

Any idea what can be happening?

Thanks
JM

Working on implementation of mdTabs...

[Error] Error: [$compile:multidir] Multiple directives [mdTabs (module: material.components.tabs), sfField] asking for new/isolated scope on: <md-tabs md-dynamic-height="" md-border-bottom="" sf-field="0">

There are formatting issues added in the latest version of Angular Material that turn input-containers into inline-block instead of block and now require to be set to block.

I have to consider what ASF users would expect the default behaviour to be (assuming block so far) and then provide both options. As the format is defined by attributes this will need to be handled as part of the sfBuilder process.

Repeating this process on a required field was creating duplicated error messages:

1. focus field
2. fill field
3. blur field
4. focus field
5. empty field
6. blur field
   • Error message displayed.

Fixed by changing ng-if to ng-show on ng-messages dummy element created by sfMessagesNodeHandler.

I believe the behavior is documented here by the angular team. angular/angular.js#7549 (comment)

Error messages were not being removed on autocomplete fields, I'm not sure if this is better here or in the main angular-schema-form issue list, but I only noticed it on the md-autocomplete field.

Fixed by adding a method to the messages.js file for angular-schema-form and changing the ngModel watch to use it instead of update

    var updateAsync = function( checkForErrors ) {
        $timeout( function() { update(checkForErrors); } );
    };

...

    var once = scope.$watch('ngModel',function(ngModel) {
        if (ngModel) {
          // We also listen to changes of the model via parsers and formatters.
          // This is since both the error message can change and given a pristine
          // option to not show errors the ngModel.$error might not have changed
          // but we're not pristine any more so we should change!
          ngModel.$parsers.push(function(val) { updateAsync(true); return val; });
          ngModel.$formatters.push(function(val) { updateAsync(true); return val; });
          once();
        }
      });

I am saving off my form and repopulating at a later time. Everything renders fine except for the checkbox.html. Whenever I load up using a previous model, schema form material doesnt seem to add the md-checked class and thus my checkboxes never get the checkmark. My model looks good, when I inspect the html, the tag shows aria-checked = true but not checkbox and no md-checked class.

Anybody else experience this?

Validation error messages, like 'field is required', 'pattern does not match', are not displayed in UI. The same works as expected with bootstrap decorator.
I have posted the issue in detail here

Add autocomplete and allow for template usage.

Based on: https://material.angularjs.org/HEAD/#/demo/material.components.autocomplete

Needs to allow template via schema form attribute or reference to included template.

Hi, all.

I just noticed bower has a reference to another repo (just a copy from this one but outdated):

http://bower.io/search/?q=angular-schema-form-material

Any chance to fix it ? Because is very confusing.

Thanks in advance
JM

Angular Material keeps complaining about this:

Markup '<fieldset flex></fieldset>' may not work as expected in IE Browsers. Consult 
'https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers' for details.

Markup '<md-button flex></md-button>' may not work as expected in IE Browsers. Consult 
'https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers' for details.

More information here:
https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Some culprits include fieldset.html and submit.html which have flex on a <fieldset> and <md-button> respectively.

Hi,

I am creating a form with only inputs of text, and is working ok. but when I put a model with data previusly loaded, the text int the input don't show correctly, but if I click the input, then the text is showed.

How can I fix this?

Thanks!!.

I'm trying to present the user with the error messages below the input fields, just as they do with the bootstrap schema form. But I'm unable to understand this. I can see that we have something called sf-messages on the elements, but how do I populate them?

Add Material design datepicker: https://material.angularjs.org/HEAD/#/demo/material.components.datepicker

Add the Material datepicker as part of the decorator instead of loading as an extension like the Bootstrap decorator requires. Will require update once the new mdDatepicker is released in 0.12 or after.

tinymce support was removed while developing ASFM, but at some point we will need to be reintegrated prior to a 1.0.0 release. Ideally as an add on in a way that any rich text editor could be added.

Hi,
How can I extend this decorator with my own custom components?
thanks.

Hey,

could you please make a release and a npm package.

thanks

action.html probably missing something to handle the onClick that is passed.
e.g

        {
          type: 'actions',
          items: [
            { type: 'button',
            "style": "md-warn", title: 'Regress', onClick: () => {
              console.log('REG');
              }
            },
            { type: 'button', title: 'Advance', onClick: () => {
              console.log('ADV');
              }
            }
          ]
        },