AngularJS and Bootstrap: red border with invalid input field to send

Question

I have this basic form implemented using AngularJS and Bootstrap: http://jsfiddle.net/dennismadsen/0stwd03k/

HTML

<div ng-controller="MyCtrl"> <form class="well" name="formTest" ng-submit="save()"> <div class="form-group"> <label for="name">Name*</label> <input type="name" class="form-control" id="name" placeholder="Enter name" required /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> 

Javascript

 var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.save = function () { }; } 

Result

A name entry field is required. When I click the submit button, I need the input box to have a red border if it is not valid. How can I do that?

Alternatively, if I do not focus the input field, and it is still invalid, it would be great that a red color is displayed at this time, instead of waiting for the form to be submitted.

Answer 1

The first thing you did not have enough to add ng-model='name' to the input field, then the only form will become invalid when you click submit, otherwise the form will always be valid, since it considers that it does not have a field.

Then I add the submitted class to the submit button click, and then set the css border as .submitted will be the parent and .ng-invalid will be the child, so we can put the style in .submitted .ng-invalid

HTML

 <div ng-controller="MyCtrl"> <form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" > <div class="form-group"> <label for="name">Name*</label> <input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required /> </div>{{submitted}} <button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button> </form> </div> 

CSS

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

Working script

Hope this helps you, thanks.

Answer 2

Twitter Bootstrap has a has-error class, so I would use it in combination with ng-class for a form group, then a label with label and label-danger classes for a good grade:

 <div class="form-group" ng-class="{'has-error': errors.Name }"> <label for="name">Name*</label> <input type="name" class="form-control" id="name" placeholder="Enter name" required /> <span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span> </div> 

Then there is an errors object in your controller and set the Name property for it to a value in the string if the name is not valid.

Answer 3

Basically, you'll need angular to do the validation, so add novalidate to the form. Also add the ng-class field to input to determine whether to add a css error

 <form name="myForm" novalidate ng-submit="test()"> <input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''"> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required. </span> </span> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> 

Good luck ..