question / request for dynamic ng-messages error

[chiefjester]

I've been reading ng-messages api, and it seems very powerful. However I just want to ask if its possible to have the error message being dynamic.

Instead of:

<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-messages="myForm.myField.$error" ng-messages-include="error-messages"></div>

Is this possible?

<script type="text/ng-template" id="error-messages">
<div ng-message="required">This {{ $parent.field_name }} is required</div>
<div ng-message="minlength">This  {{ $parent.placeholder_perhaps }}  is too short</div>
</script>
<div ng-messages="myForm.myField.$error" ng-messages-include="error-messages"></div>

I believe doing it like this will make our code more DRY.

[Narretz]

Well, why don't you try it?

[chiefjester]

any hints on how to traverse / get the field name of the enclosing scope?

[Narretz]

$name is set on the ngModelController, so you can get it like myForm.myField.$name.

It's apparently not documented. :(

[chiefjester]

@Narretz, if I use it as a template, and use ng-message-include, how can I access the name of the field, (basically) not knowing the actual field?

<script type="text/ng-template" id="error-messages">
  <div ng-message="required">
    This {{ myForm.__what-to-place-here__.$name  }} is required
  </div>
</script>

[JeroMiya]

ngModelController.$name is not what you would typically show in an error message. Rather, you would use the label.

Other use cases:
ngMinlength, ngMaxLength: could (or do?) these directives save the min and max length somewhere on the ngModel controller (maybe the validator itself, at link time?), so that the ngMessage error can use them, e.g. "This value is less than the minimum length of {{parentForm[fieldId].$validators.minlength.value}}."

[adrianandreias]

This is similar to #10037. Is it currently achievable with 1.4.0-beta.5?

If there's currently no way to reference the field (actually I think "pass" the field because ng-messages-include and the field itself are not really linked in anyway, just they usually appear one after the other in DOM) it would be nice to have especially in the light of the new dynamic ng-messages: #10676

You can currently achieve this, but without reusing messages in ng-messages-include:

<input name="field1" type="number" ng-model="myForm.field1">
<div ng-messages="myForm.field1.$error">
  <span ng-message="backend">{{ backendErrors['field1'] }}</span>
  <ng-messages-include src="msgs.html"></ng-messages-include>
</div>

<input name="field2" type="number" ng-model="myForm.field2">
<div ng-messages="myForm.field2.$error">
  <span ng-message="backend">{{ backendErrors['field2'] }}</span>
  <ng-messages-include src="msgs.html"></ng-messages-include>
</div>

I assume a simple implementation would be to just pass the field object to ng-messages-include:

<ng-messages-include src="msgs.html" field="myForm.field1"></ng-messages-include>

And then just use use the field object in the msgs.html file:

<span ng-message="backend">{{ backendErrors[field.$name] }}</span>

And in controller you'd just manipulate these:

$scope.myForm.field1.$error = {'backend': true}
$scope.backendErrors['field1'] = 'Dynamic error'

@matsko what do you think? :)

[adrianandreias]

Any comment on this? The ng-messages-include dynamism is severely limited if there is no way to differentiate between form controls.

[bastijns-jeroen]

+1

[NBerghen]

+1 :)

[Alasiac]

+1

[ajhodges]

+1

[IvanJosipovic]

+1

[ctomoiaga]

+1

[jorgenbs]

+1

[thuey]

+1

[mamartins]

+1

[siva-I]

+1

[antidote2]

+1

[matsko]

Alright this definitely seems super popular. I'm happy to add something like this in... It just needs to have planning first. @petebacondarwin and @IgorMinar what do you guys think?

[sureshvramani]

+1

[petebacondarwin]

I suggest that this is unlikely to be done before 1.6.

[pranaydutta89]

👍

[aliok]

The solution should also solve the problem where I want to show the min allowed value in the error message for a input type="number". A message like:

"{{field.$name}} has a value less than allowed minimum value {{field.$something}}".

That property $something which is be the min attribute defined on the input element.

[HichemBenChaaben]

+1 would be nice to have.

Just for info, it currently works with the version 1.5 of angular and ng-messages.

This is just to illustrate, (assuming that the inputs are within an ng-repeat)
it works fine with the $index and the formname['fieldname'+$index].$error passed to ng-messages

<input name="name="firstname{{index}}" ng-required ng-minlength="3" ng-maxlength="25" />
<div class="help-block" ng-messages="formname['firstname'+$index].$error">
  <p ng-messages-include="components/partials/form-errors.html"></p>
</div>

[codymullins]

@HichemBenChaaben we just upgraded from Angular 1.4 to 1.5 based on that but we still aren't having any luck - looks like in the DOM the ng-messages isn't evaluating the $index to a number.

[gkalpak]

@codymullins, please open a separate issue if you think this is indeed a bug in Angular. This should work though.

[george3447]

+1