How do I do form validation and conditional markup in angularjs?

Question

How do I get the errors class/message to display using angular js and forms etc?

I tried this but it doesn't seem to validate at all:

<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="obj.title.$invalid">
  You are required to enter a name.
</div>

http://plnkr.co/edit/C6eU4pIS8FTfA59SCShh?p=preview

Khanh TO · Accepted Answer · 2014-01-30 03:37:48Z

2

You have to wrap it inside a <form>, give the form a name and the input a name, then access the validity though formName.inputName

<form name="form">
    <div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
      <label for="name">Name</label>
      <input type="text" name="title" class="form-control" id="name" ng-model="obj.title" required>
    </div>
    <div class="alert alert-danger" ng-show="form.title.$invalid">
      You are required to enter a name.
    </div>
  </form>

Be aware that <form> is an instance of FormController in angular. That's where we have angular validation.

DEMO

edited Jan 30, 2014 at 3:37

answered Jan 30, 2014 at 3:32

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I do form validation and conditional markup in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related