1

I am using angularjs to do client side validation on a textbox where I need input as alphanumeric chars only. If the textbox is left empty or non-alphanumeric char is entered, the submitform sends 'false' to JS which is desired but the problem is it doesn't pass the non-alphnumeric char itself (in the scope).

JSP file:

    <form name="addressForm" method="post" 
ng-submit="submitform(addressForm.$valid)" novalidate>
    ..
    <input ng-model="address" type="text" 
**ng-pattern**="/^[a-zA-Z0-9 ]*$/" required="true"/>

JS file:

$scope.submitform= function(isValid){
var inputAddr = $scope.address;
alert(inputAddr);  //coming as undefined
...

Now when I input an alphanumeric character in input box 'address' in jsp it gives me undefined on alerting it in JS (probably because of pattern which filters the char being non-alphanumeric). If I remove ng-pattern, it passes the submitForm passes 'true' as if every input is "as expected". The reason I want to access $scope.address is to check and value and display different error message for "empty" and a "non-alphanumeric" validation.

Any help is appreciated !

Improve this question
2
  • 1
    Unfortunately that is how ng-pattern works, it will simply leave the model as undefined as long as the value does not match. We had to stop using it because we ran into the exact same problem. Our solution was to do the validation in the controller, but I don't think it's a good solution. Angular's form-validation mechanics is in my opinion broken to the point where it's more or less completely useless. Commented Apr 24, 2014 at 7:55
  • Sorry, I don't agree with you. Angular form's validation is very usefull, but we need to understand how it works. The model value is assigned just when the model is valid. When it is not valid, we must to check $viewValue property to get what the user typed. Commented Apr 24, 2014 at 8:30

2 Answers 2

Reset to default
6

When the model is not valid, the value is not assigned to the model. If you want to see what the user has typed, you need to check $viewValue:

You must to add name attribute to input, so change your input html to:

<input ng-model="address" type="text" name="address"
ng-pattern="/^[a-zA-Z0-9 ]*$/" required="true"/>

And change your submit function to

$scope.submitform = function(isValid) {
    console.log($scope.addressForm.address.$viewValue);  
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes this is another approach. Good catch on needing to supply a value for the name attribute.
1

It sounds like you just need to know what the validation error is.

You can check the $error property the FormController (addressForm in your case) to see what validations passed or failed.

For example, if the input is empty, then the "required" validation will have failed and addressForm.$error.required will be an Array containing the inputs that failed this validation.

If the "required" validation succeeded, then addressForm.$error.required will just be false.

You can use this in angular expressions quite easily:

<p ng-show="addressForm.$error.required">This field is required.</p>

Or you can access the form through the $scope object that is associated with the view:

if ($scope.addressForm.$error.required) {
   // required validation failed
}

Check out the documentation for FormController and ngModelController.

Improve this answer

7 Comments

When doing that you have to make sure your form does not suddenly end up inside a directive that creates an isolated scope (like ng-if) or you will suddenly no longer be able to access the FormController any more. As long as you know that will never happen it will work.
@ivami Yeah, definitely it's quite a pain with any sort of dynamic forms. I mostly agree with your comment, validation in Angular should be easier :)
PS: This question might help for people struggling w/locating FormController's in dynamically generated forms.
Yeah, there are definitely ways to locate the FormController reference, but I honestly think it's better to just roll your own validation with a combination of custom directives and services invoked from the controller. But we shouldn't have to jump through hoops to access the input-fields. I hope they look at that for Angular 2.0.
@user3137592 ng-pattern is also a "validator" so when the pattern does not match your alpha numeric regex, it will also set a value on the $error object. Check the value of $error.pattern.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.