Pretty straight-forward question. When I click on an input field I want to select-all the text so when I start typing it over-writes what was previously there. Anyone know how to do this?
Seems the following should work:
<input matInput (click)="$event.target.select()">
Example
What worked best for me is onfocus="this.select()"
<input matInput onfocus="this.select()">
If you are using angular material 1.x, you can use md-select-on-focus
<md-input-container>
<label>Auto Select</label>
<input type="text" md-select-on-focus>
</md-input-container>
This link can help you md-select-on-focus
Related
I get the autocomplete suggestions when I type, but when I select the value it doesn't populate the field.
Here is a GIF to illustrate the issue.
https://media.giphy.com/media/lzwkRcCKiLafkRcjEE/giphy.gif
Here is another example of it working, then stopping to work:
HTML
<input type="text" name="last-name" autocomplete="last-name" value="MacIsaac">
The form is built with React
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete, autocomplete="family-name" should autocomplete to the last name.
So the end result should be: <input type="text" name="last-name" autocomplete="family-name" value="MacIsaac">
Ensure your inputs are wrapped in a form element and autocomplete will work.
In the following form, the ng-pattern validation does not work.
The regex works as i expect in https://regex101.com.
It should show .custom-error div if the user enters some special character.
Where am I doing it wrong?
<form novalidate name="myForm">
<label for="subnet">only alphanumeric</label>
<input type="text" name="subnet" ng-model="subnet" class="form-control"
id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="myForm.subnet.$error.pattern">
not in one of predefined characters
</div>
</form>
I think the ng-show="myForm.subnet.$error.pattern" is wrong. I read the official angular doc and i think you should try ng-show="!myForm.subnet.$valid" instead :
<input type="text" name="subnet" ng-model="subnet" class="form-control" id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="!myForm.subnet.$valid">
not in one of predefined characters
</div>
It hope it will help you
Change the ng-pattern code to ng-pattern="/^[a-zA-Z\x7f-\xff\s]*$/". It will work now.
Working plunker here
All the best.
I saw this bootstrap popover and I'am trying to use it in my project.
Consider a simple example.
<input type="number" ng-model="data" step="0.1" />
The input field has steps of 0.1. I want the user to enter only values up to 10 and not beyond that.
If user enters anything beyond 10, I want a popover to display at the top stating that the value needs to be entered from the range 0 to 10 only.
How can I achieve this? The popover shown above does not have any example similar to the one I am looking for. Can someone shed some light?
You can adapt the programmatically triggering popups answer (or any of the directives from Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? and tie it to the field validation
<form name="myForm">
<input popover="Should be between 1 and 10" name="myInput" ng-model="test"
popover-toggle="myForm.myInput.$error.max" max="10" type="number"
popover-placement="bottom" />
</form>
I've used the directive from https://stackoverflow.com/a/31372487/360067
Plnkr - http://plnkr.co/edit/2uk4YM5zinM01ayzZKdd?p=preview
I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this
<input ng-model="data" type="text" />
I want the input field to show "whatever is in {{data}}" but the variable data itself remains unchanged (no quotes).
I haven't found any css/Angular tricks yet... any ideas?
Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.
For instance, if you do
<input type="text" value="prefixText {{name}} suffixText" ng-model="name">
The input box will display whatever is in name(with no prefix/suffix text)
However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.
<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">
Here's the demo
You can try this
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<span matPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234">
<mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>
</form>
Demo
I've got two input fields of type number. I want second to have minimum attribute dependant on first field. I can dynamically change the attribute, but ng-valid does not change, when value is lower than minimum.
jsfiddle code example: http://jsfiddle.net/NBhn4/87/
Is that a bug or am I doing something wrong?
I found this: https://github.com/angular/angular.js/issues/2404. It seems to suggest, that the problem was fixed. In my jsfiddle example I am using angular 1.3.5 and it's still not working.
<input type="number" ng-model="max" min={{min}} name='max'>
Using this, changes the minimum, but ng-valid seems not be be triggered after change.
Its your angularjs version problem I hope. Use latest versions of angularjs and this code is working.
<form name="form" novalidate ng-init="min=1;number=0">
Number:
<input type="number" ng-model="number" name="number" min="{{min}}">
<div style="color: red" ng-show="form.number.$error.min">Number must be at least {{min}}</div><br>
Minimum:
<input type="number" ng-model="min" name="min">
</form>