Back to All

A prefix for a textField element

Hey,
I created a custom text element for the form with a fixed prefix that signals the user how the should approach the field in question. This could be a nifty feature to implement into the textField elements for example.

I was asked to share the solution, so here goes.
Not sure if this is the best way to do it, but at least it works:

<label for="computerName">VDI dekstop name
	<span class="required-label">*</span>
</label>


<div class="input-group">
	<span class="input-group-addon">VDI-</span>
	<div class="form-group" ng-class ="{'has-error': customForm.computerName.$invalid && customFrom.computerName.$dirty}">
		<input id="computerName" class="form-control" maxlength="11" pattern="^([a-zA-Z0-9-]{1,11})$" type="textField" value="" data-value="" required="" data-name="computerName" name="computerName" ng-init="initElementValue('computerName','')" ng-model="formData['computerName']" >
	</div>
</div>
<div class="help-block">
		<i>The maxinum length of the name is 11 characters. You can include letters (a-z), numbers or a dash ('-').</i>
</div>

The prefix can also be transformed into a "suffix" by placing the "your text here" block after the input tag.