Error/Info example

Here you can see a full example on how to use the error and info helpers for form fields using AngularJS.

Error: PO line item reference
Must be 4 numeric digits in length.
Must be present on the related PO document.
Definition: GLN
A GLN (Global Location Number) is a globally unique 13 digit numeric identifier that is used to access data about a location.
More information about the GLN System
Error: GLN
Must be 13 numeric digits in length.
Can only contain numbers.

Here's the source for the form above:

<form data-ts="Form" name="form">
	<fieldset>
		<label>
			<span>Text</span>
			<input placeholder="Description" />
		</label>
	</fieldset>
	<fieldset>
		<label ng-class="{'ts-error': form.poref.$invalid}">
			<span>PO line item reference</span>
			<input name="poref" ng-model="model.poref" pattern="[0-9]{1,4}" ng-required/>
		</label>
		<dl class="ts-errors" ng-show="form.poref.$invalid">
			<dt>Error: PO line item reference</dt>
			<dd>Must be 4 numeric digits in length.</dd>
			<dd>Must be present on the related PO document.</dd>
		</dl>
	</fieldset>
	<fieldset>
		<label ng-class="{'ts-error': form.gln.$invalid}">
			<span>GLN (Optional)</span>
			<input name="gln" ng-model="model.gln" size="13" pattern="[0-9]{1,13}" />
		</label>
		<dl class="ts-info" ng-hide="form.gln.$invalid">
			<dt>Definition: GLN</dt>
			<dd>A GLN (Global Location Number) is a globally unique 13 digit numeric identifier that is used to access data about a location.</dd>
			<dd><a href="http://en.wikipedia.org/wiki/Global_Location_Number">More information about the GLN System</a></dd>
		</dl>
		<dl class="ts-errors" ng-show="form.gln.$invalid">
			<dt>Error: GLN</dt>
			<dd>Must be 13 numeric digits in length.</dd>
			<dd>Can only contain numbers.</dd>
		</dl>
	</fieldset>
</form>