I've been looking over the Angular Schema Form documentation to be able to apply attributes to the elements generated at: https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md
Have been looking up and down and have found nothing. I see through defining the schema that you can define custom HTML classes:
htmlClass: "street foobar", // CSS Class(es) to be added to the container div
fieldHtmlClass: "street" // CSS Class(es) to be added to field input (or similar)
labelHtmlClass: "street" // CSS Class(es) to be added to the label of the field (or similar)
But, haven't been able to find where I can apply attributes like the data attribute or an attribute specific to the element itself. Any resources in regards to this type of basic functionality you'd expect from form generation?
Any ideas?
Thanks!
I do not think this is possible to do purely through json schema definitions, you would have to extend Schema Form and provide your own HTML template with your custom attributes. I've had this problem myself and have had to do the very same.
I'm sure you've seen this but here's the docs on extending:
https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md
Related
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
As per this documentation, we do not need to have a data- as a prefix for a custom HTML attribute in JSX to appear in the actual DOM element without warning.
But when I try and use<div size="hello">my div element</div> it appears as <div>my div element</div> in actual DOM.
When I try <div Size="hello">my div element</div> then it appears correctly but it gives a warning.
What is the right way of adding size as a custom property on the HTML attribute?
example codepen here
Since the "size" attribute is a valid attribute for other tags but does not exist on the <div> element React strips it. In the documentation you referenced, it does state that you can prefix attributes with data-. "Just like before, React lets you pass data- and aria- attributes freely".
For obvious reasons, this is not recommended and should probably only be done if non-react scripts utilize the attribute.
To answer the question, if you have to store data in attributes, the best option is to prefix it with data-.
I know that we can use css classes for the className attribute but I see in a lot of tutorials that even if the value written for className is not used in the css file it is still used in the components. Can someone explain why? Or how to determine the value of the className we need to use?
The HTML class attribute (as set by the React className attribute) is a general way to label elements with some meaningful labels. It can be used for CSS styling, or JavaScript queries like document.querySelectorAll, or just to make the HTML intent more readable.
In particular, it's common to include classes in your HTML in case you'll need them later for CSS styling or JavaScript queries. To be clear, there's no list of valid class names; you can use whatever names you want, and use or not use them in order code as you wish.
AngularJS 1.6 documentation for directives states:
$compile can match directives based on element names (E), attributes (A), class names (C), and comments (M).
(...)
The following demonstrates the various ways a directive (myDir in this case) that matches all 4 types can be referenced from within a template.
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
Can you use components in the same way, adding them to HTML element by attribute? Because documentation for components always shows examples of comonents being used as elements.
To clarify, instead of having to write it like below and cluttering my markup with non-standard elements:
<component-name></component-name>
I'd like to be able to do something like that in my HTML:
<h1 component-name=""></h1>
The entire web is moving towards components. I wouldn't be concerned about "non-standard elements." At any rate, components are restricted to elements only. They cannot be used for Attributes. This is the primary use case for directives vs. components.
Components are provided specifically for creating HTML and augmenting it with view based behavior. Directives are now primarily for decorating HTML.
CSS locator :".header-GlobalAccountFlyout-link.display-block" returns 3 elements in a class. I need to get to the last one -"Create an Account". Does anybody know how to finish writing CSS to get there? Thank You.
Using Attribute Selectors we don't necessarily need the Class selectors here at all.
You have a few options:
If data-uid never changes:
[data-uid="eRDhfBAS"]
If the href link never changes:
[href="/account/signup"]
If the alt text never changes:
[alt="Create an Account"]
If the data-tl-id never changes:
[data-tl-id="header-GlobalAccountFlyout-flyout-link-1"]
If there may be other elements with those same attributes and values, simply include your Class selectors as well. For example:
.header-GlobalAccountFlyout-link.display-block[href="/account/signup"]
Or you could combine some of the above attribute selectors...
[href="/account/signup"][alt="Create an Account"]
In short I would like to have a custom data validator without writing entire directive for it.
Here is my case -- I have editor component/directive with several input fields. Let's say (this is content of the template of editor directive):
<input ng-model="phrase"></input>
<input ng-model="translation"></input>
The "classic" approach would be to write:
<input ng-model="translation" validator-1 validator-2 validator-3... ></input>
and add appropriate directives for those validators. But I don't like this approach, because those validators are not general purpose, they are tailored for this template only, and adding them suggests there is some kind of composition (that it would be almost OK to change something), and it is not true -- there is atomic entity "input + validators" = "translation".
Thus I would like to add custom validator directly into the code of my editor directive.
How to do it?
So far I was experimenting with finding out what is inside ngModel of my editor directive, but since the editor directive does not have model for entire editor, just for distinct fields (as shown above) I failed at requiring ngModel for my editor.