Pattern that doesn't allow whitespace at the begining. Please find the code below :
<input class="mdl-textfield__input inputMaterial" maxlength="100"
[(ngModel)]="getEmpName[i]" (keydown)="onKeyPress($event)" pattern="[a-zA-Z
]*" appFloatLabelDirective="" formControlName="employer_name">
You can take a look at the angular input-mask plugin for this kind of problem : https://github.com/assisrafael/angular-input-masks
It allows you to filter inputs, and create custom directives
^[^-\s][\w\s-]+$ - this pattern helped me.
Related
I'm wanting to make a paper/material design version of the <input type="file">, can anybody suggest anything for my code below?
<paper-input type="text" id="fileName" placeholder="File" readonly></paper-input>
<paper-button id="changePicture" class="changePicture">Upload Picture</paper-button>
You need to use paper-input-container to get the same behavior and material design as paper-input.
If you are brave enough to explore others code you can take a look at Vaadin-upload element :)
Find on webcomponents.org, https://www.webcomponents.org/search/upload
e.g. http://file-input.raynicholus.com/components/file-input/demo.html
I'm learning how to translate values in angularjs.
I have created a plunker from the example given in here
The plunker link is in here: http://plnkr.co/edit/rkARrvV2tco42VKdfaJI?p=preview
For a quick glance:
<div ng-controller="Ctrl">
<p translate="VARIABLE_REPLACEMENT" translate-values="{ name: '<b>example html</b>'}"></p>
</div>
gives me output as
Hi, example html (since '<b>example html</b>' gets translated to example html
My expectation is to get a string similar to
Hi, <b>example html</b> instead of Hi, example html
Any ideas How do I achieve that?
Are there any flags to do the same?
EDIT: I could not find any such flag at the site
The documentation has the solution at
https://angular-translate.github.io/docs/#/guide/19_security
where you can set Sanitization Strategy.
like $translateProvider.useSanitizeValueStrategy('sanitize')
I have an ng-repeat for a list of attributes and want to show error messages for each input. For a pattern error I also want to show the specific regex it has to match.
Can I access an input's pattern somehow? I know I could add an attribute containing the regex but I would like to know if there is an angular way somehow.
(This is an oversimplified example, the regexes can be different for different attributes)
<form name="form">
<div data-ng-repeat="(attributeName, attributeMetaData) in configuration.metaData">
<input data-ng-model="configuration[attributeName]" type="text" name="{{attributeName}}" data-ng-pattern="/^[0-9][0-9]:[0-9][0-9]$/">
<span data-ng-show="form[attributeName].$error.pattern && form[attributeName].$dirty">
Please check your input format [pattern should go here]
</span>
</div>
</form>
jsFiddle: http://jsfiddle.net/lisapfisterer/ndu2g0ev/
Based on your restriction that the model cannot be changed, I guess your best bet is to have a separate model containing just regexes
I have the following code that is causing me meaningless pain
<input type="text" ng-class="GLOBAL_ERROR == 1 ? 'error-branch' : 'defaulttxt'" ng-model="frm.FirstName" name="FN" ng-required="true" ng-minlength="2" ng-maxlength="100"/>
When the page is loading the form is invalid so the class is error-branch after the data is loaded though the class does not change to defaulttxt
How do you fix this? Should i use something like the following?
$scope.$on('$viewContentLoaded', function(){
});
First of all thanks to #dfsq i realized the solution while replicating the issue on plunkr
the solution is to add one more condition to the GLOBAL_ERROR ==1 and it is
GLOBAL_ERROR==1 && myForm.FN.$invalid
Case closed damnnn
I am new to AngularJS but I have searched extensively and could not find a working answer to this question, maybe its just not possible the way I have it in mind.
What I would like is to be able to combine error conditions so that I can use more generic error messages in the ng-messages module. This saves us a lot of time maintaining texts as our application is multi-lingual. In my example it would be great to combine minlength, maxlength, and pattern and have it reference 1 generic message. The only way I have gotten it to work is for a separate ng-message for each type and then reuse the error text which seems redundant to me. Hopefully it's something short I am missing like not understanding when/how to use , or ||.
<form id="myFormId" name="myForm" novalidate>
<input name="sText" ng-model="someText"
type="text"
required
ng-minlength="8" minlength="8"
ng-maxlength="8" maxlength="8"
ng-pattern="/^[a-zA-Z0-9]{8,8}$/" pattern="/^[a-zA-Z0-9]{8,8}$/">
<div ng-messages="myForm.sText.$error" role="alert">
Error message:
<div ng-message="required">Required text missing</div>
<div ng-message="minlength || maxlength || pattern">Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of || </div>
<div ng-message="minlength">Too short - this does work but does not change even if this is removed</div>
</div>
</form>
I have created this simple Plunk to illustrate what I am trying to do:
EDIT 1
I do realize I could use a single regex pattern expression but the above validations is strictly to reproduce the issue and show an example. I have other validations I would like to combine that could not be expressed with a single pattern.
ng-messages will show error message inside ng-messages directive element, but that has limitation that you could only display single error ng-message inside the ng-messages div.
So if you wanted to show multiple ng-message inside ng-messages directive you need to add ng-messages-multiple attribute on ng-messages directive element.
Docs Link
Markup
<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
Error message:
<div ng-message="required">
Required text missing
</div>
<div ng-message="minlength, maxlength, pattern">
Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
</div>
<div ng-message="minlength">
Too short - this does work but does not change even if this is removed
</div>
</div>
Working Plunkr
Update
After angular document updation I came to know that ng-messages doesn't support to show multiple ng-message error inside ng-messages, for solving this problem we should have ng-messages-multiple attribute on ng-messages element.
From Docs
By default, ngMessages will only display one error at a time. However, if you wish to display all messages then the ng-messages-multiple attribute flag can be used on the element containing the ngMessages directive to make this happen.
Markup
<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
Error message:
<div ng-message="required">
Required text missing
</div>
<div ng-message="minlength, maxlength, pattern">
Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
</div>
<div ng-message="minlength">
Too short - this does work but does not change even if this is removed
</div>
</div>
Working Plunkr
In Angular 1.4 you can specify multiple errors for a ng-message:
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
See documentation
Inorder to make your ng-message more generic you can keep all your error messages at one place and use it when required. You could do this using ng-message-include.
Have a look at : Reusing and Overriding Error Messages
http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html#reusing-and-overriding-error-messages.
I think you will like to implement this.