A directive for ionic that wraps form inputs and cleanly displays errors.

• ngMessages

Install package from bower

bower install ionic-validation-directive

Include the js and css file in your index.html file:

<script src="lib/ionic-validation-directive/dist/ionic-validation-directive.bundle.min.js"></script>

Add the module ionic-validation-directive to your application dependencies:

angular.module('starter', ['ionic', 'ngMessages', 'ionic-validation-directive'])

You can override some of the default settings for the directive by placing attributes on the directive. See below for usage examples.

Note: You will need to use the !important tag on any CSS properties inside custom classes that you pass to the directive.

To use this directive, you simply need to wrap the standard ionic inputs with the validation-item directive.

You will need to provide an object that contains key, value pairs of the errors and their respective inputs. This keys of this object are the names of the input's errors.

Important: The name and ng-model attributes are required for this to work. If you exclude either one, then errors will not be detected.

<validation-item errors="{ required: 'This field is required', minlength: 'Usernames must have at least 6 characters' }">
  <label class="item item-input">
    <input type="text" name="username" ng-model="formInfo.username" placeholder="Username" min-length="6" required>
  </label>
</validation-item>

<validation-item errors="{ required: 'User role is required' }">
  <label class="item item-input item-select">
    <div class="input-label">
      Role
    </div>
    <select name="userrole" ng-model="selectedOption" required>
      <option value="" selected></option>
        <option>Admin</option>
        <option>Reader</option>
        <option>Writer</option>
    </select>
  </label>
</validation-item>

<validation-item errors="{ required: 'This field is required' }" ionic-style="false" animate="false">
  <input type="text" name="username" ng-model="formInfo.username" required>
</validation-item>

<validation-item errors="{ required: 'This field is required' }" error-class="my-error-class" error-icon="icon ion-android-alert" error-color="positive">
  <label class="item item-input">
    <input type="text" name="username" ng-model="formInfo.username" placeholder="Username" min-length="6" required>
  </label>
</validation-item>

.my-error-class {
    /* Only box-shadow or border support animations */
    border: 1px solid red;
    /* or */
    box-shadow: 0 0 0 2px $positive inset;
    padding: 2px; /* Padding is necessary to see the box-shadow */
}

The ionic-validation-directive responds to the following events

• formSubmitted
• formTouched

Broadcast formSubmitted when you would like to let your validation-items know that the parent form has been submitted so that errors can be shown immediately. For example, if a form is submitted and calls this function:

save() {
  $scope.$broadcast('formSubmitted', true); // Pass true or false
  
  ... Saving stuff
}

then all validation-item errors will immediately display even though the inputs may not be dirty.

Emit formTouched from child directives when they do not have any inputs or selects.

scope.$emit('formTouched', true); // Pass true or false

The above code would used when my-directive has finished making a change to the modelValue.

<validation-item errors="{ customValidator: 'Fix the error in my-directive' }">
  <my-directive ng-model="someValue"></my-directive>
</validation-item>

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

This project is licensed under the MIT License - see the LICENSE.md file for details