AngularJS form validations: has-error not showing for ng-required fields

Question

When a user is editing any part of their address, every field should have the red invalid border around it indicating that the full form is required. I can't get the 'Address' field to show the invalid red border.

set-dirty-if='user.objectId' sets every field to dirty. I probably have access logic, but the idea is to force the user fill out every address field and having indicators to do so.

What am I missing to get the 'Address' invalid error to show?

(note that populating the "Address" field will turn city, state, zip's border red, which is desired)

<form class="form" name='form' class="edit-form-wrapper" novalidate>
    <fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}">
      <label class="control-label" for="address">Address</label>
      <input type="text" class="form-control" name="address" ng-model="user.address" set-dirty-if="user.objectId" ng-required="user.city || user.state || user.zip">
      <span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>


     <fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}">
       <label class='control-label' for="city">City</label>
       <input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'>
       <span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
     </fieldset>


     <fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}">
       <label class='control-label' for="state">State</label>
       <input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'>
       <span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
     </fieldset>



     <fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}">
       <label class='control-label' for="zip">Zip Code</label>
       <input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'>
       <span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
     </fieldset>
   </form>

Shashank Agrawal · Accepted Answer · 2016-04-13 04:13:43Z

Change your ng-required value of address field from user.city || user.state || user.zip to (user.city || user.state || user.zip) ? true : false) i.e.:

<input type="text" class="form-control" name="address" ng-model="user.address"
    ng-required="(user.city || user.state || user.zip) ? true : false">

See a working example below

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app class="container">
  <form class="form" name='form' class="edit-form-wrapper">
    <fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}">
      <label class="control-label" for="address">Address</label>
      <input type="text" class="form-control" name="address" ng-model="user.address" ng-required="(user.city || user.state || user.zip) ? true : false">
      <span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>


    <fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}">
      <label class='control-label' for="city">City</label>
      <input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'>
      <span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>


    <fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}">
      <label class='control-label' for="state">State</label>
      <input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'>
      <span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>



    <fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}">
      <label class='control-label' for="zip">Zip Code</label>
      <input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'>
      <span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>
  </form>
</div>

Collectives™ on Stack Overflow

AngularJS form validations: has-error not showing for ng-required fields

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