xebia/angular-form-messages-example

<h2>Simple form</h2>
<div class="row">
  <div class="col-lg-4">
    <p>The simple form has <code>af-feedback</code> added to the form groups to show a feedback icon in the two input fields.</p>
    <p>Note that if you have multiple <code>af-...</code> directives on the same element, you can pass the field name once using the <code>af-field-name</code> attribute.</p>
  </div>

  <div class="col-lg-8">
    <form class="form-horizontal" af-submit="submitSimple()" name="userForm" novalidate>
      <div af-messages af-alert></div>

      <fieldset>
        <legend>Personal information</legend>

        <div class="form-group" af-field-state af-feedback af-field-name="user.name">
          <label class="control-label col-md-2" for="name">Name*</label>
          <div class="col-md-4">
            <input type="text" class="form-control" id="name" name="user.name" ng-model="user.name" af-field name-length="3" required />
            <div af-messages="user.name"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.name">{{user.name}}</pre></div>
        </div>

        <div class="form-group" af-field-state af-feedback af-field-name="user.email">
          <label class="control-label col-md-2" for="email">E-mail*</label>
          <div class="col-md-4">
            <input type="email" class="form-control" id="email" name="user.email" ng-model="user.email" af-field required />
            <div af-messages="user.email"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.email">{{user.email}}</pre></div>
        </div>

        <div class="form-group" af-field-state="user.color">
          <label class="control-label col-md-2" for="color">Favorite color</label>
          <div class="col-md-4">
            <select class="form-control" name="user.color" id="color" af-field ng-model="user.color" ng-options="value for (key, value) in {red: 'Red', blue: 'Blue', green: 'Green'}" required>
              <option value=""></option>
            </select>
            <div af-messages="user.color"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.color">{{user.color}}</pre></div>
        </div>

        <div class="form-group" af-field-state="user.agree">
          <label class="col-md-2 control-label">Agreement*</label>
          <div class="col-md-4">
            <div class="checkbox">
              <label>
                <input type="checkbox" af-field name="user.agree" ng-model="user.agree" required>
                I agree
              </label>
            </div>
            <div af-messages="user.agree"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.agree">{{user.agree}}</pre></div>
        </div>
      </fieldset>

      <p>
        <button type="submit" class="btn btn-primary" af-submit-button>Submit</button>
        <span ng-show="isSubmitting" class="spinner"></span>
      </p>

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