Setting Bootstrap Error Class via AngularJS on Form Submit?

Question

How can I efficiently set the error state of multiple form field after the user submits the form?

I can set the error state easily enough on a constant basis. As described in this thread I use the following HTML code:

<div class="control-group" ng-class="{ error: groupForm.textbox_Group.$invalid }">
  <label class="control-label" for="textbox_Group"><i class="icon-home"></i> Organization</label>
  <div class="controls controls-row">
    <input type="text" class="span6" id="textbox_Group" name="textbox_Group" placeholder="Organization" ng-model="org" required>
  </div>
</div>

My issue with this is that it will appear in the error state immediately on the page loading. I want it to appear normal before the user hits submit and then, only if it is $invalid to be flagged.

I'm currently using individual flags, along the lines of:

<div class="control-group" ng-class="{ error: group.isInvalid }">
  <!-- snip -->
</div>

<div class="control-group" ng-class="{ error: date.isInvalid }">
  <!-- snip -->
</div>

It works, but seems very bloated to me. Is there a more streamlined way to flag any form fields in an $invalid state, but only after that form is submitted?

lucuma · Accepted Answer · 2013-05-03 00:34:54Z

1

You can create a scope variable that defaults to false that tracks when the button is clicked.

$scope.formSubmitted = false

The on your form add a ng-submit directive to change the condition to true.

<form name='myForm' ng-submit="formSubmitted=true" >

Now change the ng class condition:

ng-class="{ error: date.isInvalid && formSubmitted }"

answered May 3, 2013 at 0:34

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Setting Bootstrap Error Class via AngularJS on Form Submit?

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