http://plnkr.co/edit/II4RLMviSep3zFcgtcAv?p=preview
<form name="linkform">
<input ng-model="myvar" type="url" ng-pattern="/[abcd]+/">
<p>{{myvar}}</p>
<p ng-show="linkform.$error.url">ERROR!</p>
</form>
In the example I expect it to match "abcdabcdabcd", but instead that is invalid, while "232r4t3trq" or anything other than [abcd] is valid.
I'm very confused. Basically the url validation by Angular is awful, so I was trying to make it better, but then I got stuck with weird behaviour by ng-pattern.
(hmmm I just tried watching that variable and it becomes [{}] when valid, and null when invalid.... what is going on??? #.#)
The error you display is for the the key url. It thus signals that what you typed is an invalid URL, because your input is of type url. If you don't want angular to validate your input as a URL, make it of type text.
And if you want to display ERROR when the ng-pattern validation fails, use
ng-show="linkform.$error.pattern"
Also, if you want to only accept a, b, c and d inside the field, the pattern should be /^[abcd]+$/.
Related
I am new to AngularJS, and I have a problem with ng-model.
Here's my code:
<section class="field row" ng-repeat="field in fields">
<input class="value" ng-show="editMode" placeholder="{{field.name}}" ng-model="field.value" type="url" />
</section>
As you can see, I'm looping through $scope.fields which I got from the server and is an array of about 40 objects that have keys like name and value.
Inside the section I have an input, which has the ng-model property set to field.value. When the server gives a value to the field, it is shown inside the input.
At some point I want to update the user's changes, by sending $scope.fields back to the server.
However, when the user changes something in the inputs, the value for the changes fields becomes undefined.
I hope this describes my problem well enough.
Thanks!
To get the changes, you should pass the original object name i.e fields. Refer below calling fn
ng-click="save(fields)"
The reason this caused a problem is simply because the input was a URL input and I was typing simple "hello" strings to test it, instead of typing URLS. Apparently AngulaeJS only puts the answer in the model if it matches the field type.
I have the following code
<div class="form-group" show-errors ng-show="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" ng-model="contact.SSN" ui-mask="999-99-9999" name="SSN" maxlength="50" required />
</div>
I would have thought that Angular would have made sure that the hidden field was no longer required however that is not the case. although the user can't see it it's clearly still stopping the form from being submitted because I see the following error in the console.
An invalid form control with name='SSN' is not focusable.
So - the question is how do I handle this? If it's displayed I want it to be required if not obviously we can't try and force the user to fill out the values.
2 solutions:
use ng-if rather than ng-show to remove the input from the form rather than hiding it
instead of required, use ng-required="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'" to make it required only when the condition showing the field is true. You should put that complex condition in a scope function though, to avoid duplicating it.
Note however that even if the form is invalid, it can still be submitted, unless you're explicitely preventing it by disabling its submit button when the form is invalid. I don't think the error you're seeing has anything to do with the form being invalid.
Also note that the second solution will only deal with the field being required. If the value inside the field is too long or doesn't match with the mask, the field will stay invalid. So you should probably use the first solution.
I'm pretty new to angular world and I have an issue with it.
I'm working with ejs too.
I have an input that I want to fill (value) with an ng-model.
The problem is my model is empty while the user doesn't specify a value.
I want to display a default value when my model is empty. This default value is sending by the ejs (server side). Doing that, I can't set a default value in my controller.
To do so I wrote the following :
<input type="text" ng-model="owner_adress" ng-value="'{{owner_adress || '<%=user.owner_adress%>'}}'"/>
If I look into my code, I can see the value is okay (ejs result when my model is empty, my model value otherwise) but the value is not displayed in my input (ie the user can't see it).
I looked for a work around (ng-cloak was fine but I can't use it in my input field).
Any clue would be nice !
Use ngInit directive instead. If owner_adress is defined in controller it will be used, otherwise it will default to serverside rendered value:
<input ng-model="owner_adress" type="text"
ng-init="owner_adress = owner_adress || '<%=user.owner_adress%>'"/>
Im currently having an issue where I want to create multiple form inputs with validation. The form elements I want to
create will be up to 100 duplicated fields. To do this I have used ng-repeat as can be seen in this small example below. As you may notice
I have a dynamic model and name for my input. Everything works fine with the one exception of validation.
When I inspect the element in the html the dynamic name has got applied as expected and the first name input is called
test0. As you may know form validation in angular is done using the form name and input name. As my input is dynamically
named it seems to be causing issues as you can see by my error output it doesnt seem to log the error correctly, however,
if I was to hardcode the name as test0 instead of test{{i}} (which in the html inspection is test0) everything would work.
This is an issue as validation on the duplicated inputs is not doable this way and the only way I can think of resolving this
is outputting 100 html input elements manually with the only difference being the name of each input. This is not Ideal and I was
wondering if anyone knows a way around this issue or if it is a known bug with Angular? Quite possibly I could just be doing something stupid.
<ng-form name="testform">
<div ng-repeat="i in [0,1,2]">
ERROR {{testform.test0.$error}}
<label>
TEST<br />
<input name="test{{i}}" ng-model="$parent.test[i]" type="text" required />
</label>
</div>
Any help with this matter would be greatly appreciated as I have spent a considerable amount of time trying to resolve this issue.
Thanks.
I was going through my app trying to secure it as much as I can and it got me thinking. I always validate my user's input and I always scrub the input, so for example if I have a "birthday" field, I make sure it's a valid date before putting it into the database. But I also have fields in my database like "passwordresettoken", and I have my code generate this field if the user request it.
Now on my normal user profile page, I obviously have no field called "passwordresettoken", so I don't validate or scrub it, because it should not exists in the form that will be passed. In fact, it should never be passed, since it's not something the user would ever input.
So my question is, is it possible to spoof input fields? Could they edit the HTML on my page to include a passwordresettoken field and then do some damage when the form is passed?
Yes absolutely. I don't even have to look at your HTML. I can submit directly using curl.
http://curl.haxx.se/docs/httpscripting.html
This html
<form method="POST" action="junk.cgi">
<input type=text name="birthyear">
<input type=submit name=press value=" OK ">
</form>
Is equivalent to this curl request
curl --data "birthyear=1905&press=%20OK%20" http://www.example.com/junk.cgi