7

我正在使用 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 ......但这没有用

4

2 回答 2

6

最终，这种控制的笨拙实现使事情变得困难。如果它是一个包含当前输入和标签数组的模型的 ControlValueAccessor，那么找到解决方案会简单得多。

与@AlesD 的回答一样，我采用了一个利用onAdding. 他提出的一个问题是使用this. 为了解决这个问题，我bind()在必要时使用该功能。

为了实现您想要的行为，我做了三件事：

  1. 修改验证器函数，使其仅在字段addFirstAttemptFailed为真时返回错误。这将阻止验证器执行。
  2. 添加回调到onAdding. 它验证标签，如果验证失败，将addFirstAttemptFailed设置为 true 并返回可观察到的错误（我升级到 rxjs 6）。抛出此错误会阻止添加标签。
  3. 成功添加项目后， addFirstAttemptFailed将设置回 false，以便下一个标签的行为可以再次开始。

不幸的是，在 onAdding 期间调用的方法有一些钻机。

  • 为了进行验证，我必须获得对芯片的 TagInputComponent 和 call 的引用，并setInputValue()传递已经设置的值。相信我，在偶然发现这种副作用之前，我尝试了上千种变体。尝试调用updateValueAndValidty()组件上的 FormControl 实例或 TagInputComponent 中的 Form 和 FormControl 的各种实例都不太奏效。
  • 为了防止添加（并且不清除输入），我必须从throwError(). 不幸的是，内部设置订阅的方式是 TagInput 组件只调用catchError()它的订阅回调函数，而不是源 observable。因此错误会显示在控制台中。再一次 - 我尝试了很多不同的方法来解决它。

相关代码

@ViewChild('tagInput')
tagInput: SourceTagInput;


public validators = [ this.must_be_email.bind(this) ];
public errorMessages = {
  'must_be_email': 'Please be sure to use a valid email format'
};

public readonly onAddedFunc = this.beforeAdd.bind(this);

private addFirstAttemptFailed = false;

private must_be_email(control: FormControl) {        
  if (this.addFirstAttemptFailed && !this.validateEmail(control.value)) {
    return { "must_be_email": true };
  }
  return null;
}

private beforeAdd(tag: string) {

  if (!this.validateEmail(tag)) {
    if (!this.addFirstAttemptFailed) {
      this.addFirstAttemptFailed = true;
      this.tagInput.setInputValue(tag);
    }
    return throwError(this.errorMessages['must_be_email']);
  }
  this.addFirstAttemptFailed = false;
  return of(tag);
}
于 2019-03-07T16:00:59.600 回答
0

ngx-chips 有一个onAdding事件，你可以用它来做额外的检查。在事件处理程序中，您可以检查组件是否有效，如果控件无效则取消添加。然后文本将保留。对于 Enter 键，它无法工作，因为 Enter 键被编码为提交表单并始终清除文本。您可以在 tag-input内部使用的 tag-input-form 组件的 GitHub 源代码中看到它。检查onKeyDown方法。

这是组件中 onAdding 处理程序的示例实现：

public onAdding(tag): Observable<string> {
  if (!this.hasErrors()) { // this is tricky the this here is actually the ngx-chips tag-input component
    return of(tag);
  } else {
    return EMPTY;
  }
}

正如我在代码中的注释中已经提到的那样，由于事件处理程序this在函数内部的调用方式实际上是 ngx-chips 标签输入组件，而不是您通常期望的组件。

拥有此方法后，您只需将其绑定到模板中，它应该可以工作。

<tag-input ... [onAdding]="onAdding">

我还用这个实现创建了你的 stackblitz 的一个分支。

如果这对您不起作用，您可能需要联系组件的作者以获取更多详细信息或使用其他组件。例如，Angular 材料组件包含一个类似的芯片输入组件。

于 2019-03-03T23:44:07.793 回答