json-schema-form / angular-schema-form-material Goto Github PK
View Code? Open in Web Editor NEWAngular Material decorator for Angular Schema Form
License: MIT License
Angular Material decorator for Angular Schema Form
License: MIT License
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');
}
}
]
},
Hey,
could you please make a release and a npm package.
thanks
Hi,
How can I extend this decorator with my own custom components?
thanks.
Should be able to handle varying options for flex layouts to replace the Boostrap decorator's grid.
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.
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.
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.
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!!.
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
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.
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
On angularJS this onClick event will work.
{
"type": "button",
"style": "btn-danger",
"title": "No",
"onClick": "sayNo()"
}
But not with angular-schema-form-material.
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 ?
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?
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?
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
I would like to contribute and use it at the same time..
Repeating this process on a required field was creating duplicated error messages:
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();
}
});
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">
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.