为什么我的 ng2 验证器将我的验证消息包装在 `\n` 中？

Question

实施迭代 error-text-accumulation pattern from the angular2 documentation，我将来自自定义表单验证器的所有消息累积到一个字符串中以显示给用户：

onValueChanged(data?: any) {
  if (!this.heroForm) { return; }
  const form = this.heroForm.form;

  for (const field in this.formErrors) {
    // clear previous error message (if any)
    this.formErrors[field] = '';
    const control = form.get(field);

    if (control && control.dirty && !control.valid) {
      const messages = this.validationMessages[field];
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + '\n';
      }
    }
  }
}

我们的设计要求这些在输入字段下方显示为多行文本，没有任何列表修饰。

使用上面的函数，并在右大括号之前进行记录，我看到了我希望我的字符串包含的内容：

password1: "Must contain an uppercase character.↵Must contain a special character.↵Must contain a numeric character.↵

然而，当它到达模板时，它变成了这样：

<div _ngcontent-xoo-4="" class="error-message-field">
                            Must contain an uppercase character.
Must contain a special character.
Must contain a numeric character.

</div>

因为我正在使用

.error-message-field {
  height: auto;
  white-space: pre-line;
}

我在字段错误的上方和下方多了一行。

这两个额外的\n从哪里来的？我自己不会在其他任何地方操作结果字符串。

Answer 1

归根结底，这是一个愚蠢的错误。最初的选项卡 (\t) 放弃了它。

我已经将 IDE 的美化器配置得过于激进了。换行符来自模板：

<div *ngIf="formErrors.password1" class="error-message-field">
    {{ formErrors.password1 }}
</div>

我假设 HTML 缩小器会从值周围删除这些额外的换行符和空格。查看源代码（而不是 Devtools Elements 树）使其更加明显。

为什么我的 ng2 验证器将我的验证消息包装在 `\n` 中？

Why is my ng2 validator wrapping my validation messages in `\n`?

angular2-forms

angular2-template

angular