Javascript 如何使用角度信息显示字段名称及其有效值？

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

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

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

我使用不同的常用验证消息保留以下模板（为了简单起见，仅显示“必需”和“minlength”消息）：

请填写此字段。
请输入至少2个字符。

正如问题的标题所说，我希望动态显示需要完成的字段的名称以及有效值。 否则，为了覆盖模板中的消息，我需要编写大量重复的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}。
请为{0}输入至少{1}个字符。

其中，

{0}

将替换为字段的名称（“姓氏”），并将

{1}

替换为最小长度（2）

有没有办法达到我想要的或类似的目的

---

谢谢。

要获取角度js中的动态值：

{{passenger.LastName}}

---

您的最小长度值来自何处？

您可以尝试以下方法（请参阅）

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

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

---

下面是一个示例：

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

虽然这并不理想，但我认为这是一种简洁的方法，至少在Angular发布此功能请求之前：

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

验证消息：

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

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

{{field}}是必需的。
请为{field}输入至少{{minLength}}。
请为{{field}输入不超过{{minLength}}。

您能添加一个plunkr吗？谢谢您的回答。如果可能的话，我今天晚些时候会试一试。尽管在您的示例中，您似乎是在硬编码其中一条消息（通过指定“msgtype=‘required’”），因此不会显示minLength消息（或任何其他消息）。如果我错了，请纠正我。再次感谢！我制作的示例假设了许多MSGType中的一种，因为我认为这正是您想要的，但是它应该很容易使用，比如说，MSGType列表。您还可以使用

ng开关

，如果或

ng show

触发多个案例，则可以使用

ng开关。但随后，它开始感觉更像是一个指令，而不是一个简单的包含——这可能是您想要的。