如何用ngTagsInput显示消息？多邮箱输入框必填校验失效求助

嘿，我来帮你一步步解决这两个问题：

问题1：如何使用ngTagsInput显示消息？ #

首先得确保你已经把ngTagsInput模块正确引入到你的Angular应用里，比如：

angular.module('yourApp', ['ngTagsInput']);

接下来分几种场景来说明：

1. 基础的消息（标签）展示 #

直接用<tags-input>绑定一个数组，就能把字符串消息以标签的形式显示出来。比如：
模板代码：

<tags-input ng-model="displayMessages"></tags-input>

控制器代码：

angular.module('yourApp').controller('MsgController', function($scope) {
  // 初始化要显示的消息数组，每个元素是带text属性的对象
  $scope.displayMessages = [
    { text: '系统通知：请完成今日任务' },
    { text: '用户反馈：页面加载缓慢' }
  ];
});

2. 自定义标签样式/内容 #

如果想让消息标签更个性化，可以用tag-template自定义模板：

<tags-input ng-model="displayMessages">
  <tag-template>
    <div class="custom-tag">
      <span class="tag-text">{{$tag.text}}</span>
      <button class="close-btn" ng-click="$removeTag()">×</button>
    </div>
  </tag-template>
</tags-input>

3. 空状态提示消息 #

当没有消息可显示时，添加提示文本：

<tags-input ng-model="displayMessages"></tags-input>
<p class="empty-hint" ng-if="displayMessages.length === 0">暂无消息</p>

问题2：多Email输入字段的校验不生效问题 #

你提到的min-tags="1"和required没起作用，主要是因为ngTagsInput需要配合Angular表单的校验机制才能正确触发错误提示，直接加required原生属性对它不生效。下面是完整的解决方案：

1. 正确搭建表单结构 #

确保<tags-input>在Angular表单内，并且设置name属性（这是表单校验的关键）：

<form name="emailForm" novalidate>
  <tags-input 
    name="emailTags"
    ng-model="emailList"
    min-tags="1"
    placeholder="输入邮箱地址"
    ng-model-options="{ updateOn: 'blur' }"
  ></tags-input>

  <!-- 错误提示：当控件被触摸且min-tags校验失败时显示 -->
  <div class="error-message" 
       ng-if="emailForm.emailTags.$touched && emailForm.emailTags.$error.minTags">
    please enter an email ID
  </div>
</form>

2. 关键配置说明 #

• name="emailTags"：让表单能识别这个控件，从而追踪它的$touched（已触摸）、$error（错误状态）等属性。
• min-tags="1"：触发minTags类型的错误，所以我们在错误提示里要检查$error.minTags。
• novalidate：禁用浏览器原生校验，避免和Angular的校验逻辑冲突。
• ng-model-options="{ updateOn: 'blur' }"：让模型在输入框失去焦点时更新，确保$touched状态正确触发。

3. 调试与额外处理 #

如果错误提示还是不显示，可以先在模板里打印状态值调试：

<!-- 临时调试用，确认状态是否正确 -->
<p>Touched: {{emailForm.emailTags.$touched}}</p>
<p>Has minTags error: {{emailForm.emailTags.$error.minTags}}</p>

要是$touched状态没更新，还可以手动通过ng-blur触发：

<tags-input 
  name="emailTags"
  ng-model="emailList"
  min-tags="1"
  placeholder="输入邮箱地址"
  ng-blur="emailForm.emailTags.$touched = true"
></tags-input>

另外，如果你还需要校验每个输入的邮箱格式，可以添加自定义正则校验：

angular.module('yourApp').controller('EmailController', function($scope) {
  $scope.emailList = [];
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  // 监听标签变化，校验每个邮箱格式
  $scope.$watch('emailList', function(newTags) {
    if (!newTags) return;
    newTags.forEach(tag => {
      tag.isValidEmail = emailRegex.test(tag.text);
    });
  }, true);
});

内容的提问来源于stack exchange，提问作者Qirohchan