How to display the name of the field and its valid values with Angular Messages?

Question

I have the following code to render an input and its validation messages:

<input type="text" ng-model="passenger.LastName" ng-model-options="{ updateOn: 'blur' }" name="lastName" required ng-minlength="2" ng-maxlength="30" ng-pattern="/^[A-Za-z-' ]+$/">    
<span ng-messages="detailsForm.lastName.$error" ng-if="passengerDetailsForm.$submitted || detailsForm.lastName.$touched">
    <span ng-messages-include="errorMessages"></span>
</span>

I keep the following template with different common validation messages (just showing the "required" and "minlength" ones, for simplicity):

<script type="text/ng-template" id="errorMessages">
    <span ng-message="required" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please, complete this field.</span>
    <span ng-message="minlength" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please, enter at least 2 characters.</span>
</script>

Like the title of the question says, I'd like to display the name of the field which needs to be completed and also the valid values dynamically. Otherwise, in order to override the message from the template, I need to write a lot of repeated HTML, when the message is always the same and the only thing which will change is the name of the field, or the minimum length.

I'd like to have the possibility to do something like the following instead:

<script type="text/ng-template" id="errorMessages">
    <span ng-message="required" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please, type in your {0}.</span>
    <span ng-message="minlength" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please, enter at least {1} characters for {0}.</span>
</script>

Where {0} would be replaced with the field's name ("last name") and {1} with the minimum length (2).

Is there a way to achieve what I'm looking or something similar?

Thanks.

Answer 1

I finally ended up using ngInit to send parameters to the error message template.

Although it's not ideal, I think it's a neat approach, at least until Angular releases this feature request: https://github.com/angular/angular.js/issues/9849

Thanks @Dinesh for his suggestion. His approach helped me get to this solution.

Input:

<input type="text" placeholder="Surname(s)" ng-model="passenger.LastName" ng-model-options="{ updateOn: 'blur' }" name="lastName" id="lastName" required ng-minlength="2" ng-maxlength="30" ng-pattern="/^[A-Za-z-' ]+$/">

Validation messages:

<span ng-messages-include="errorMessages" ng-init="field = 'first name'; minLength = detailsForm.firstName.$attributes.minlength; maxLength = detailsForm.firstName.$attributes.maxlength"></span>

Error messages Template:

<script type="text/ng-template" id="errorMessages">
    <span ng-message="required" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> The {{ field }} is required.</span>
    <span ng-message="minlength" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please enter at least {{ minLength }} for the {{ field }}.</span>
    <span ng-message="maxlength" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please enter no more than {{ minLength }} for the {{ field }}.</span>
</script>

Answer 2

To get dynamic values in angular js:

{{passenger.LastName}}

Where does your minimum length value come from?

Answer 3

You can try something along these lines (See ngSwitch )

Define a template that can take some args.

<script type="text/ng-template" id="errorMessages">
 <div ng-switch on="msgtype">
   <span ng-switch-when="required" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> {{msgtext}}</span>
   <span ng-switch-when="minlength" class="error"><i class="fa fa-exclamation-triangle fa-lg"> </i> Please, enter at least {{msgarg}} characters.</span>
   <span ng-switch-default class="a-ok"><i class="fa fa-exclamation-triangle fa-lg"> </i> Good Inputs!</span>
 </div>
</script>

And then use it with ng-init . Obviously you could pass field name too. (BTW the single-quote around the ng-include src matters to ng.)

<input type="text" ng-model="passenger.LastName" ng-model-options="{ updateOn: 'blur' }" name="lastName" required ng-minlength="2" ng-maxlength="30" ng-pattern="/^[A-Za-z-' ]+$/">    
<span ng-include src="'errorMessages'" 
       ng-init="msgtype='required'; msgtext='aloha!'; msgarg=3; "></span>
</span>

Here is an example: plnkr