Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm fairly new to dev work and i've run into an issue. supporting an app and they want to do masking on the input for a phone number. They want to have the input be that you can only enter a phone number in a xxx-xxx-xxxx format. Currently we are checking input, but only when we write to the DB.
The app has no masking built into it and is using AngularJS 1.4.9. I was able to locate something at the below URL however I'm having issues with it not working. I can call mask in my html template but it doesn't seem to do anything.
Does anyone have any suggestions or something that is easy to implement? I don't want to re-write a ton of the app. Right now we do the validation on the write to the DB, which can be annoying as you dont get the error till you hit save and then you lost all the data you put into the form.
I'm also very new to Angular, sorry for any misunderstandings i might have.
https://github.com/candreoliveira/ngMask
You can do that without installing any new dependencies using ng-pattern,
running link
<ng-form name="myForm" ng-controller="mainCtrl">
<div>Phone No. :</div>
<div>
<input type="text" placeholder="913-636-7865" name="phone" ng-pattern="phoneNumbr" ng-model="phone" />
<span class="error" ng-show="myForm.phone.$error.required">Required!</span>
<span class="error" ng-show="myForm.phone.$error.minlength">Phone no not less that 10 char.</span>
<span class="error" ng-show="myForm.phone.$error.maxlength">Phone no not more than 11 char.</span>
<br><span class="error" ng-show="myForm.phone.$error.pattern">Please match pattern [913-636-7865]</span>
</div>
Using ng-mask is a good option , but make sure you have it installed and added to your dependency list
angular.module('yourApp', ['ngMask']);
here what should your html look like :
<div class="row">
<div class="col-md-6">
<label>Phone number (Home)</label>
<input type="tel"
name="phone"
mask="999-999-9999"
ng-model="phone"/>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a text field on which i have used max checked of angular js.
its working absolutely fine but i want to show error in span if text.length reached the max length. like ng-if searchtext.length== max show a message
<form name="myForm">
<input
type="text"
name="myText"
ng-model="myModel"
ng-maxlength="2">
<span ng-show="myForm.myText.$error.maxlength">Error</span>
</form>
using the Angular documentation : maxlength
https://docs.angularjs.org/api/ng/directive/ngMaxlength
Example should be fine for you I hope
I'm using Ionic to display a list of contacts from a user. So, when the user enters the number and clicks the add button it should display like (011)123-1234 in the list, and this should be followed for each entry. I tried to set the pattern in the tag but couldn't display the phone number. Please help me.
<input type="tel" maxlength="10" ng-model="phone" pattern="/(?:\(?\+\d{2}\)?\s*)?\d+(?:[ -]*\d+)*$/"> <br>
<button ng-click="home()">Home</button></n>
<button ng-click="add()" value="Add">Add</button><br>
You should use ng-pattern instead of pattern.
Checkout the ngPattern documentation for more details.
<input type="tel" maxlength="10" ng-model="phone" ng-pattern="/(?:\(?\+\d{2}\)?\s*)?\d+(?:[ -]*\d+)*$/">
Also, I believe you are looking for a mask directive not a regex.
I suggest this one that works well and it is easy to use.
I'm working on an Angular2 project & currently i'm stuck with a Quizz module, so illustrating the problem ; when a candidate wants to pass a test he will get that test with some questions ; every question has 4 propositions with radio buttons and he should answer merely by checking one of them for every question. here is the HTML snippet of what i'm talking about :
<div *ngFor="#qt of listQuestion">
<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>
<div class="uk-accordion-content">
<input type="radio" id="radio_demo_1" />
<label for="radio_demo_1"> <b>{{qt.lpo[0]}}</b></label> <br><br>
<input type="radio" id="radio_demo_2" />
<label for="radio_demo_2"><b>{{qt.lpo[1]}}</b></label><br><br>
<input type="radio" id="radio_demo_3" />
<label for="radio_demo_3"> <b>{{qt.lpo[2]}}</b></label> <br><br>
<input type="radio" id="radio_demo_4" />
<label for="radio_demo_4"><b>{{qt.lpo[3]}}</b></label>
</div> </div>
Where the listQuestion is a list of Question entities which each one of them has a wording and a list of propositions (lpo), in that way i cannot check only one radio button for every question as it is shown below :
I tried to remove the id in the <input> tags and it still the same problem , I've changed the id by name and give the same name for all tags thus, I could check only one proposition but when moving to another question and checking a new proposition , the first one will be cleared.
Any help Please ?
Your problem is that the way you currently do it, you have a single radio group for all questions. You can solve it by creating radio element name attributes dynamically. Something like this:
<h3 class="uk-accordion-title" >{{qt.id}}</h3>
<input type="radio" id="radio_demo_{{qt.id}}_{{index$}}" name="radio_demo_{{qt.id}}_{{index$}}" />
<label for="radio_demo_{{qt.id}}_{{index$}}"> <b>{{qt.lpo[0]}}</b></label> <br><br>
{{qt.id}} (or any other qt property that uniquely identifies the question) is the key here.
This way, you'll have a separate radio group for each question, because group names won't intersect.
if I provoke 'min-length' error and then try to provoke 'required' error, the latter isn't shown, although the input is underlined in red.
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" maxlength="100" type="password" name="register_password" id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message="maxlength">The password should be shorter</div>
<div ng-message="minlength">The password should be at least 6 characters long</div>
<div ng-message="required">Required</div>
</div>
</md-input-container>
Full working example:
http://codepen.io/AndriusRimkus/pen/mPEjYX
Thanks!
You should use the following code
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" md-maxlength="100"
type="password" name="register_password"
id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message-exp="['required', 'minlength']">
The password shold be at least 6 characters long</div>
<!-- <div ng-message="minlength">The password should be at least 6 characters long</div> -->
<div ng-message="md-maxlength">The password should be shorter</div>
</div>
</md-input-container>
So there are many things you should consider. Since you are using angular material design I think you should use md-maxlength which will show a hint for how many charcters written against maxlength. I am not sure if there is any md-minlength directive is available. Now require and minlength is kind of same thing so I think you should combine those two as a single error message. Now There are some specific things releated to [ngMessages][1] check the documentaion for detail explation. I'll say couple of things about that. By default ngMessges only displays one error message and if there are more than 1 error message are valid then which ever comes first in DOM will be displayed. you can use multiple or ng-messages-multiple to display more than 1 error messages. I suggest you should write you error in incrementing order like required first followed by minlength(If you want to display it seperately) and at the end md-maxlength. You can use ng-message-exp to combine more than 1 error codes.
Your code is correct but there is one point.
You are using an old version of AngularJS Material.
If You change the last script with this lines then your code will be run properly.
<!-- Angular Material Library -->
<!-- Version 1.1.4 -->
<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>
Check online
Good Luck
This question already has answers here:
What is the difference between required and ng-required?
(3 answers)
Closed 7 years ago.
I have one template
<form ng-submit="save()" ng-controller="formController">
<input type="text" ng-model="textValue1" required /></br>
<input type="text" ng-model="textValue2" ng-required="true" /></br>
<input type="submit" value="Submit">
</form>
here both are validating fine when i clicked submit button,may i know which scenario these things can use exactly in angularjs.
'AngularJS form elements look for the required attribute to perform validation functions. ng-required allows you to set the required attibute depending on a boolean test (for instance, only require field B - say, a student number - if the field A has a certain value - if you selected "student" as a choice)
As an example, <input required> and <input ng-required="true"> are essentially the same thing
If you are wondering why this is this way, (and not just make <input required="true"> or <input required="false">), it is due to the limitations of HTML - the required attribute has no associated value - it's mere presence means (as per HTML standards) that the element is required - so angular needs a way to set/unset required value (required="false" would be invalid HTML)'
Source: What is the difference between required and ng-required?
ng-required="condition" is similar to required="{{condition}}".
No difference than this.