Required field Angularjs 1.2 and Bootstrap 3

Question

With the changes to angularjs and bootstrap 3 I have been unable to create a form field that's required where the item will be surrounded with red highlight by only adding the required parameter to the input field. Here is a plunker with how I have it setup on my system and would expect it to work. I can't seem to find any documentation on bootstraps site about required either so that would really help if anyone can find that.

Plunker

EDIT: Replaced all the following with below comments ideas... I would still like a solution where I don't need to write any css and use Bootstrap 3.

My form field looks like this:

<body ng-app>
<div ng-controller="Controller" class="container">
  <form novalidate class="simple-form" name="myForm">
    <div class="form-group col-sm-4">  
      Name: <input type="text" ng-model="name" name="name" class="form-control" required/>
      E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/>

      <small class="error" 
          ng-show="myForm.email.$error.required">
          Your name is required.
      </small>

    </div>
  </form>
</div>
</body>

Script.js Looks like this:

function Controller($scope) {
  $scope.name = "Test";
  $scope.email = "";
}

Style.css looks like this:

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

While this works it replaces the bootstrap css with the css above. I would much prefer to simply add in required to an element and not have to rewrite the css to add the hue and the animation.

You've made something required without putting it in a form, of course it's not going to work. — Mike Robinson, Oct 21 '13 at 21:36
Added a form so there's no confusion, but no that doesn't help. Take a look at the plunker to see what I mean. — Ty Danielson, Oct 21 '13 at 22:05

score 5 · Accepted Answer · edited May 23 '17 at 12:21

I agree with both of the other two answers but would like to add more

I think your main problem is that Bootstrap 3 removed styling based on the :invalid and related pseudo-classes (see here for why). This is where the red outline in bootstrap 2.x came from.

Firstly, to fix your plunker you should:

Bootstrap your app with ng-app as Mike says
Put your input in a form with novalidate
Give a model to your input with ng-model so that it can be invalidated (by angular, using classes)
Move jQuery script include before bootstrap as it is a requirement of bootstrap.

Now you have a plunker where the correct classes are applied to indicate input validity. You won't yet have styling on these, but they won't depend on your browser's HTML5 form validation, so will work in anything angular supports.

To apply styling, you can either use straight CSS and apply it to the ng-valid, ng-invalid, ng-invalid-required etc classes, or you can use the ng-class suggestion from this comment to apply bootstrap's classes when you need them

ng-class="{'has-error': formname.inputname.$invalid}"

if you have named your input and wrapped it in a control.

Updated plunker: http://plnkr.co/edit/mE3dkG?p=preview

Edit

I had a go at making a directive for this too. It may be overkill, but this should work wherever you have a form-group class and add an ng-form to the same element

.directive('formGroup', function(){
  return {
    restrict: 'C',
    require: '?form',
    link: function(scope, element, attrs, formController){
      if(!formController)
        return;
      scope.$watch(function(){
        return formController.$valid;
      }, function(valid) {
        if(valid)
          element.removeClass('has-error');
        else
          element.addClass('has-error');
      });
    }
  };
});

Yet another plunker: http://plnkr.co/edit/UQjRrA?p=preview

* The email will not be valid unless it looks like an email

Perfect exactly what I was looking for. – Ty Danielson Oct 21 '13 at 23:21 — Ty Danielson, Oct 21 '13 at 23:21

score 1 · Answer 2 · answered Oct 21 '13 at 22:25

You have a couple of things missing here. First, in order for a form field to validate it needs a unique name:

<input class="form-control" type="text" name="test" required/>

Second, in order to disable stock HTML5 validation, you need to add a novalidate attribute to the form:

<form class="form-horizontal" name="myForm" role="form" novalidate>

Third, and most importantly, your example has no app or controller associated with it, so angular is completely ignoring it. That one you have to fix yourself.

Read more about angular forms here: http://docs.angularjs.org/guide/forms

score 1 · Answer 3 · answered Oct 21 '13 at 22:26

1

I suggest you this excellent step by step : http://www.ng-newsletter.com/posts/validations.html

answered Oct 21 '13 at 22:26

Shipow

2,451
1
21
28

Required field Angularjs 1.2 and Bootstrap 3

3 Answers3