Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question

1 Answer

up vote 1 down vote

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 }"
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.