Почему мой ng2 validator упаковывает мои сообщения проверки в ‘n’?

Реализуя итерационный шаблон накопления текста ошибок из документации angular2, я накапливаю все сообщения от моих пользовательских средств проверки формы в одну строку для отображения пользователю:

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? Я не манипулирую результирующей строкой нигде больше.

1 ответ

  1. В конце концов, это глупая ошибка. Начальная вкладка (\t) выдала его.

    Я настроил свой IDE beautifier, возможно, агрессивно. Разрывы строк пришли из шаблона:

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

    Я предположил, что HTML-минификатор удалил бы эти дополнительные разрывы строк и пробелы вокруг значения. Взгляд на источник (а не на дерево элементов Devtools) сделал его более очевидным.