I am using angular formly. I read the documentation,but they didn't mention how to apply css classes from options.
I am trying to apply kendo ui classes to form fields but of no use.
Can anyone help me?
here is my jsbin
http://jsbin.com/golehimize/edit?html,output
Here's how you apply a custom class to the formly-field element: https://jsbin.com/foqixe/edit?html,js,output
I'm not sure what classes you're wanting to apply, but this would be the way to do it (see the email field configuration).
Related
I have a use case where i want to modify the whole template of the ui-grid. When i searched the files in the GitHub repository, i found that they use a template for the grid but couldn't find a way to change it anywhere. I also posted the same issue there but didn't get any response from them yet.
It is possible to replace any used template with a custom template. In the documentation you can find which gridOptions to use to define your own custom templates. You may choose rowTemplate, cellTemplate, footerTemplate, headerTemplate, etc. It is advisable to use the existing ui-grid template as starting point for creating your own custom template.
If you follow this example, you should be able to figure it out, I think :)
I am having an UI component which is reusable in multiple places. Therefore I have to duplicate the same css sections over several css files. Is it ok to create a directive for this scenario ? The directive will not process any js specific operations, it is there only for handling the UI component and avoid the duplication.
NOTE: You've specified “Angular” in the question title, but angularjs as a tag. This answer assumes you're coding for Angular, not AngularJS. Consider editing the tag or the question title to remove this ambiguity. (What’s the difference between AngularJS and Angular?)
Angular can bundle style information with components. You can specify the CSS:
inline using the styles attribute of the #Component decorator, or
in an external file using the styleUrls attribute of the #Component decorator.
See the Component Styles section of the Angular docs for examples & more info.
While you could technically write an attribute directive to style your component, why you would choose to do this instead of using the styling functionality provided by components is unclear. Expanding your question with an example or two of what you're trying to achieve may bring you a better answer.
I'm new to js/html so I'm actually not sure if it's angular-formly specific. I can't figure out how to change the css style globally (or for a single field) when a field is invalid. Does someone know how to do it or where I can find documentation about it? All documention I find uses the default has-error class.
The css style for invalid fields can be applied using the wrapper.
Note: this is a minimalistic answer to mark this question as solved. I will add code at a later point when I managed to get it working.
I'm reading an Angularjs Kendo UI application and I'm trying to figure out what's happening.
In the following code:
<div id="my-grid">
<div kendo-grid="controllerName.myGrid"
k-options="controllerName.myGridConfig">
</div>
</div>
It's obvious from the documentation what k-options stands for but I can't find anything related to kendo-grid attribute.
Per the Kendo UI Angular documentation here: http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-creation-in-angularjs:
The directives kick in on attributes like kendo-widget-name.
Therefore, the kendo-grid attribute will create a Kendo UI Grid widget.
A little further down the page, the section Widget Options in HTML says:
You can specify any options supported by Kendo UI widgets in element attributes by converting the option name from camelCase to dash-separated-words, and prefixing it with k-.
So to configure the Kendo UI grid, you will likely need to set the specific grid attributes using the k-[attr-name] syntax.
There are examples for creating widgets and setting properties on that page, and while they don't specifically use the Grid as an example widget, the same principals will apply for creating and configuring your Grid widget.
I need to create a form section template, so users can add/remove a new html form section on the fly.
I'm using Angular-Formly for the form template. It works really well for me. However, I need to include a rich editor inside of my form
Can anyone here please provide direction for how to do that? Can I write a angular directive to wrap a .Net rich editor in there? Has Angular-Formly provide a richEditor type or template already?
angular-formly doesn't provide a rich editor type out of the box, and I'm not aware of any open source integrations with one. But the textangular.com example as pointed out by #azium looks reasonable. It would be very simple to create a custom type using that directive. You could accomplish it like this (during the run phase):
formlyConfig.setType({
name: 'richEditor',
template: '<text-angular ng-model="model[options.key]"></text-angular>'
});
Here are the docs on custom templates, here's an example, and here's a lesson on egghead.io.