如何使用 Angular 消息显示字段的名称及其有效值？

Question

我有以下代码来呈现输入及其验证消息：

<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>

我保留以下模板，其中包含不同的常见验证消息（为简单起见，仅显示“必需”和“最小长度”）：

<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>

就像问题的标题所说，我想动态显示需要填写的字段名称以及有效值。 否则，为了覆盖模板中的消息，我需要编写大量重复的 HTML，当消息始终相同并且唯一会改变的是字段名称或最小长度时。

我希望有可能改为执行以下操作：

<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>

其中{0} 将替换为字段名称（“姓氏”），{1} 将替换为最小长度 (2)。

有没有办法实现我正在寻找的东西或类似的东西？

谢谢。

Answer 1

我最终还是使用 ngInit 向错误消息模板发送参数。

虽然不理想，但我认为这是一种巧妙的方法，至少在 Angular 发布此功能请求之前：https://github.com/angular/angular.js/issues/9849

感谢@Dinesh 的建议。他的方法帮助我找到了这个解决方案。

输入：

<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-' ]+$/">

验证消息：

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

错误消息模板：

<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

您可以尝试这些方法（请参阅ngSwitch）

定义一个可以接受一些参数的模板。

<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>

然后将其与ng-init 一起使用。显然你也可以传递字段名称。 （顺便说一句，ng-include src 周围的单引号对 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>

这里是一个例子：plnkr

Answer 3

在 Angular js 中获取动态值：

{{passenger.LastName}}

你的最小长度值从何而来？