What are the controls that I can put inside a "md-input-container" with angular material design?
The reason why I ask this is because of this sample for example:
<md-input-container>
<input flex="" flex min="0" max="20" type="number" ng-model="testNumber">
</md-input-container>
Why I look at the "Spinner" aka slider samples:
https://material.angularjs.org/latest/demo/slider
Nowhere is the md-input-container used. But only when I wrap a input of type number with a md-input-container the look of the spinner seems right as a material component.
Looking at the API of the md-input-container:
https://material.angularjs.org/latest/api/directive/mdInputContainer
They mention only "Input" and "TextArea"
Well Input can be of any type...
When I look now back again to the spinner/slider samples all of them do NOT use a md-input-container.
So something is wrong or undocumented here.
md-input-container has to be a parent container for any type of input (text, number, date, etc) in order to get that material look and feel.
However, if you do not need these material-styled placeholders, labels and validation, you can still use input which is not nested in the container. That was the case in the Sliders example.
md-input-container supports only:
input
textarea
Only 1 input can be in each md-input-container or an exception will be thrown.
The md-slider demos and docs have all been updated to use md-input-container.
Many input types like email, week, number, month, password, search, tel, text, and time are supported by md-input-container.
The following types may not have ideal behavior:
checkbox - md-checkbox preferred
image - ng-click on img preferred
radio - md-radio-button in a md-radio-group preferred
file - placeholder alignment is off in Chrome
submit - md-button preferred
reset - md-button preferred
range - md-slider preferred
Please make sure to use the angular-aria module if you are using inputs in your project. It will automatically make your app more accessible and compliant to standards related to accessibility.
Related
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
How do I create a form-submittable web component?
Background:
I have a customer-picker component that is basically a text input plus a tiny button to the right of the text box plus a dialog that pops up when the button is clicked. It is used in the same way as one might use an html select.
This component is used as part of an html form that is submitted in the old fashioned (non-ajax) kind of way. The actual html input is encapsulated privately inside of the customer-picker component.
Problem:
The text input's value is not submitted
I guess I can understand why this is. I suppose this is the desired behavior (otherwise we are breaking encapsulation).
So with all that said, how do I create a submittable web component?
For example, suppose I have a form like this:
<form action="action.jsp">
<input name="date-start"/>
<input name="date-end"/>
<input name="name-first"/>
<input name="name-last"/>
</form>
that gets submitted like this:
action.jsp?date-start=2016-06-01&date-end=2016-06-30&name-first=Joe&name-last=Smith
I would like to create the same form using components like this:
<form action="action.jsp">
<date-range name="date">
<full-name name="name">
</form>
that gets submitted exactly the same way as the example above:
action.jsp?date-start=2016-06-01&date-end=2016-06-30&name-first=Joe&name-last=Smith
I am aware of iron-form. But this solution has some problems.
For one, it does not emulate native form submission very well. In a normal html form, when you submit, the current page is automatically replaced by whatever is returned by the action URL. This doesn't seem to happen with iron-form.
Second. It only allows your component to contribute a single value to the submitted data. In the above mentioned date-range example, I would like two values to be submitted for one component.
I am working on an angular application where we are using this [Angular-Auto-Validate] plug for form validations. This plug-in works automattically with all type of form validation which is quiet easy to use but we are facing an issue with this.
We want to stop validate to bootstrap style validations. It keeps us giving this error message.
Angular-auto-validate: invalid bs3 form structure elements must be wrapped by a form-group class
as per the plug-in documentation we added this few configurations but seems like we are doing something wrong.
validator.setValidElementStyling(false);
validator.setInvalidElementStyling(false);
This will be resolved if you place all your form inputs inside a form-group class. here is example.
<div class="form-group">
<input type="text"........../>
</div>
I am trying to show 'ticks' with HTML range sliders. Like this:
While the HTML range directive allows for ticks with "step" and "datalist", Safari does not honor it while Chrome does. I am building an ionic/Angular app, so this means it does not work for iOS devices.
There are some 3rd party sliders like angular-awesome-slider that do support a form of ticks, but they have other issues which make them less usable for my need.
So my requirement is this: Given an HTML range slider, how do I go about adding an overlay on top that displays "|" marks at specific places on top of the slider?
(Note that the positioning of the "|" needs to take into account the display width of the slider)
I've set up a codepen here:
http://codepen.io/pliablepixels/pen/EjdpVB?editors=101
(SO insists if I insert a codepen link, I need to also insert code, so here is the code for the input)
<input type=range ng-model="myRange" min=0 max=20 step = 1 list="vals">
<datalist id="vals">
<option>2</option>
<option>6</option>
<option>8</option>
</data-list>
with an input range. As you see it shows ticks on Chrome but not on Safari. Can someone be so kind as to help me get started with my objective?
This is way late :-) But are you sure (I don't have an installed Safari to check) that it wouldn't help if your <datalist id="vals"> tag matched your </data-list> tag?
I'm frankly surprised that it works for Chrome! Though it definitely breaks if you change the opening tag to <data-list>