如何在JavaScript表单验证中显示多行错误提示

你遇到的问题是因为HTML会忽略文本中的换行符（\r\n），将其视为普通空格，所以控制台能正常换行但页面上无法实现。以下两种方法可以解决：

方法一：使用HTML换行标签 <br> #

修改JavaScript代码，将错误数组用<br>作为分隔符拼接：

if(errors.length != 0){
  console.log("Not an empty array");
  console.log(errors.join('\r\n'));
  this.errorMsg = errors.join('<br>'); // 替换分隔符为HTML换行标签
}else{
  this.service.createData(formData).subscribe((res) => {
    console.log(res);
    this.userForm.reset();
    this.successMsg = res.message;
  });
}

在HTML中通过[innerHTML]绑定内容，避免Angular自动转义HTML标签：

<div *ngIf="errorMsg" class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong [innerHTML]="errorMsg"></strong> 
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

方法二：用*ngFor循环渲染错误列表 #

直接利用Angular的循环指令，将每个错误单独渲染成一行，结构更直观：

<div *ngIf="errors.length > 0" class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>
    <ul style="margin: 0; padding-left: 1.2rem;">
      <li *ngFor="let err of errors">{{err}}</li>
    </ul>
  </strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

对应的JavaScript部分无需再赋值errorMsg，直接使用原errors数组即可：

if(errors.length != 0){
  console.log("Not an empty array");
  console.log(errors.join('\r\n'));
  // 无需处理errorMsg，直接依赖errors数组渲染
}else{
  this.service.createData(formData).subscribe((res) => {
    console.log(res);
    this.userForm.reset();
    this.successMsg = res.message;
  });
}

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