What I want:
<input class="form-control" type="number" spinner ng-model="$scope.someNumber"/>
<!-- notice the `spinner` directive -->
What I have:
<input class="form-control" type="number" ng-model="$scope.someNumber"/>
Are there directives for better number spinners?
I've tried searching Google, but I'm not finding anything (spinner is also used to refer to a loading image, so perhaps I'm using the wrong terminology).
I created a directive special for you:
You can customize it as you want
<number-spin data-ng-model="vm.testNumber"></number-spin>
Here the jsfiddle
P.S. I added directive to npmjs here the link,
also github and demos
Related
I have a very simple form in my react application to fetch the user credit card information as follows.
<form autocomplete="on">
<input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
<input name="cc-exp-month"/>
<input name="cc-exp-year"/>
<input name="cc-exp"/>
</form>
I also tested in a "react-way"
I want the browser (safari in this case) to show the credit card options like the image below.
Interesting fact:
I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with npm start (as per the image above).
However, if I run npm run build and serve the ./build folder the credit card options don't show up.
That's what I still don't understand, why the same code works in one way but it doesn't work in another way?
PS1: I'm testing in both cases with HTTPS.
PS2: I tested different input names, autocomplete="cc-number" etc. But none of them worked. As the code works with npm start, I don't think is a code issue.
your HTML needs to be very properly setup for browser to pickup the UI flow and trigger auto fill functionality. It also depends upon browser support as well for example Opera didn't trigger for me, while chrome is working. Could you try following below:
https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
https://greenido.github.io/Product-Site-101/form-cc-example.html
I have added many working examples below and also please check link of the other answers. This answer contains content from the below mentioned resources and SO answers.
If both of them is working for you then you please compare them with your html.
As i can see above you're html is not formatted properly and doesn't contain even <label> tags along <input>
An example of proper payment form
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
just as a reminder i would like to add here
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found at https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values
For example for CC
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
requestAutocomplete()
Read here:
https://developer.chrome.com/multidevice/requestautocomplete-faq
https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
https://blog.alexmaccaw.com/requestautocomplete
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.
For Autofill to work on iOS safari, the page has to be served over HTTPS and the certificate should not be a self-signed one. It has to be one given a valid CA.
Hope this helps
Faced the same issue, check safari preferences
Make sure you are not using private mode or any other visitor account!
I would like to use Angular Material library in my project for showing the web page in Material design. I'm having input fields directly in a div, instead of having inside a form . How to properly do error validations now ?
Because the examples given on the documentation uses, form tag, which uses form name for showing ng-messages. How to achieve without form ?
You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>
Example Plunker
Hope it helps
I am trying to use angular typeahead.
Its loading my complete data but not showing the line items.
This is my code.
<input type="text" ng-model="selected" typeahead="item as item.entityName for item in testsList |filter:$viewValue" class="form-control" placeholder="Start typing to search tests and select it">
My ui.bootstrap version is ui-bootstrap-tpls-0.2.0
Hope somebody will come up with relevant answer.
I have attached the concerned screenshot of the out.
I'm trying to use the 720Kb datepicker.
https://github.com/720kb/angular-datepicker
While using the simple example :
<datepicker>
<input ng-model="date" type="text"/>
</datepicker>
I'm getting the blow error:
angular.js:11655 Error: [$compile:multidir] Multiple directives
[datepicker, datepicker] asking for new/isolated scope on:
http://errors.angularjs.org/1.3.15/$compile/multidir?p0=datepicker&p1=datep…epicker%20class%3D%22datepicker%22%20date-format%3D%22dd%2FMM%2Fyyyy%22%3E
at angular.js:63
I noticed that if I'm changing the name of the directive in the src file for example to datepickercust the above example will work (with changing the tags).
<datepickercust >
<input ng-model="date" type="text"/>
</datepickercust>
Also , if I'm trying the same example by changing the 'datepicker' tags to 'div' tags , and adding class='datepicker' it works fine.
<div class="datepicker">
<input ng-model="date" type="text"/>
</div>
I just can't understand what's going on here... why the original example not working ?
Thanks in advance.
Check if there are two datepicker directives with the same name and do check what formation they allow like tag, element or attribute etc.
Issue found.
Looks like UI Bootstrap still contain 'datepicker' directive which is deprecated and causing this issue .
Now need to see how I can work with both .
Thanks all.
I use angular and the bootstrap-switch plugin in my application. It works like this:
<input type="checkbox" name="my-checkbox" checked>
<script>$("[name='my-checkbox']").bootstrapSwitch("size", "small");</script>
The problem is that if I want to use all the attributes I found there it doesn't work.
How can I use ng-model with my switch?
I would like to use it like this:
<input type="checkbox" name="my-checkbox" checked="variableStatus" data-on-color="success" data-off-color="warning">
or
<input type="checkbox" name="my-checkbox" ng-model="variableStatus" data-on-color="success" data-off-color="warning">
The most obvious reason that it's not working is that bootstrap-switch is a jQuery library. Angular doesn't play well with jQuery, so if you want to use it, you'll have to write your own directive. However, the following link will give you a directive someone wrote called angular-bootstrap-switch. You might want to check it out.
https://github.com/frapontillo/angular-bootstrap-switch
Bootstrap has special method for starting, if you want start it, try it start after period time in angularjs.
setTimeout(installSwitcher, 1000);
function installSwitcher(){
$("[name='my-checkbox']").bootstrapSwitch();
}
<input type="checkbox" name="my-checkbox" checked>