Manually highlight all invalid inputs of Angular Form

1
votes

The task is kinda primitive.

I got a simple Angular form with various inputs and I'd like to highlight invalid inputs manually (e.g. on submit action).

I tried to loop over invalid inputs, assuming that they must have some method to highlight an error, but unfortunately they don't.

Same with form. $setDirty() didn't work as well.

I'm using ng-form directive to get access to both form and input.

AngularJS version is 1.2.x.

2
javascriptangularjsformsvalidation
First of all you have to precise what the invalid inputs mean to you (empty?), secondly inputs are just html elements so they have not such method as 'highlight on error', just DOM manipulating functions. My advice to you is to consider using angular validation: w3schools.com/angular/angular_validation.asp – Thomas Weglinski

2 Answers

1
votes

You form markup should look like, so that when you click on submit ng-class will add submitted class on form that will give you idea that whenever you have submitted class on form and field has ng-invalid class, you can highlight those element

Markup

<ng-form name="form" ng-class="{submitted: submitted}" ng-submit="submitted=true; submit();">
   <input type="text" name="firstname" ng-model="formData.firstname">
   <input type="text" name="lastname" ng-model="formData.lastname">
   <input type="submit" value="submit">
</ng-form>

CSS

.submitted input.ng-invalid {
   border: solid 1px red;
}
0
votes

Use ng-pattern and required it will check you validation. and onSubmiy you can customized your validation also

Example: http://jsfiddle.net/kevalbhatt18/dmo1jg02/

<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
    <input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
    <input type="submit" value="submit"/>
</form>
</div>

Js

function formCtrl($scope){
    $scope.onSubmit = function(){
        alert("form submitted");
    }
}