标签: ngx-chips

我正在使用ngx-chips将电子邮件列表作为标签添加到输入中。验证器确保每个标签看起来像一封电子邮件。

我如何确保：

1）验证器仅在添加标签时触发（即，用户点击回车，空格或逗号）

2）如果在按回车/空格/逗号时电子邮件无效，则该值仍然存在（即，它不会清除...以便用户可以对其进行修复）

堆栈闪电战在这里：https ://stackblitz.com/edit/ngx-chips-example-2qdudc

以下是我的电子邮件验证程序：

public validators = [ this.must_be_email ];
  public errorMessages = {
      'must_be_email': 'Please be sure to use a valid email format'
  };
  private must_be_email(control: FormControl) {        
      var EMAIL_REGEXP = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$/i;
      if (control.value.length != "" && !EMAIL_REGEXP.test(control.value)) {
          return { "must_be_email": true };
      }
      return null;
  }

以下是标签：

<tag-input [(ngModel)]='emails' 
name="emails" 
#email="ngModel" 
[errorMessages]="errorMessages"
[validators]="validators" 
[editable]='true' 
(onTagEdited)="onTagEdited($event)" 
[separatorKeyCodes]="[32,188,186,13,9]"
[placeholder]="'Add email'" 
[secondaryPlaceholder]="'Enter email address(es)'" 
[clearOnBlur]="true" 
[addOnPaste]="true"
[addOnBlur]="true"
[pasteSplitPattern]="splitPattern" 
theme='bootstrap' 
required >
</tag-input>

对于2），我尝试在验证器中将“ return null”更改为control.value ...但是没有用

我试图允许用户粘贴由 , 分隔的列表；或 | 使用 ngx 芯片。

有一个选项可以使用pasteSplitPattern - [?string | 正则表达式]

https://github.com/Gbuomprisco/ngx-chips

当我尝试以下操作时，我收到错误

[pasteSplitPattern]="[,|;]"

Parser Error: Unexpected token , 

我应该采取什么不同的做法？

很棒的组件。我在Angular 5中使用了最新版本的ngx-chips。我试图使自定义主题与此处相同，但不起作用。这是我的.scss文件：

@import '~ngx-chips/core/styles/core/_core.scss';

$foundation-primary: #1779ba;
$foundation-primary-dark: darken($foundation-primary, 10%);

// this is the container's theme
$foundation-theme: (
container-border-bottom: 1px solid $foundation-primary
);

// this is the tag's theme
$foundation-tag-theme: (
background: $foundation-primary,
background-focused: $foundation-primary-dark,
background-active: $foundation-primary-dark,
background-hover: $foundation-primary-dark,
color: #fff,
color-hover: #fff,
border-radius: 2px
);

// this is the delete icon's theme
$foundation-icon-theme: (
fill: #fff,
fill-focus: #eee,
transition: all 0.35s
);

// apply theme to the container
:ng-deep .ng2-tag-input.foundation-theme {
@include tag-input-theme($foundation-theme);
}

// apply theme to …