在 Angular 中显示错误名称（按功能）答案

【问题标题】：Showing Error Name (by function) in Angular在 Angular 中显示错误名称（按功能）
【发布时间】：2019-04-03 00:29:55
【问题描述】：

我正在尝试输入一个文本区域，如下所示：

  <textarea></textarea>

【问题讨论】：

详细说明您的问题。
@SunilSingh 如果函数适用于字符串，我想显示名称

标签： angular error-handling

【解决方案1】：

您可以简单地创建一个属性来保存每个规则失败时收到的错误消息。例如

在你的组件上创建一个全局属性

errorMessages:Array<string>=[];

在每条规则上，失败时推送错误消息

   checkTabsNewLines = ( str ) => {
        const reN = /[\n]/mg;
        const reT = /[\t]/mg;
        if (((str || '').match(reN) || []).length === ((str || '').match(reT) || []).length - 1) {
          return true;
        } else {
         this.errorMessages.push("checkTabsNewLines thrown an error");
          return false;

        }

      }

在您的 html 上，您可以简单地迭代并显示错误消息

<div [hidden]="checkValid()" class="error-message">
                <span [innerHTML]="error"  *ngFor="let error of errorMessages"></span>
            </div>

您可以通过将数组设置为空来根据您的逻辑清除错误

this.errorMessages=[];

注意：如果你只有一个，你也可以使用 string 而不是 Array 在 UI 中显示的错误

【讨论】：

【解决方案2】：

您需要对 html 和 ts 文件进行少量更改。

html 更改

innerHTML 不是必需的。如果你有 html 内容，那么你可以使用 innerHTML。

<div [hidden]="checkValid()" class="error-message" [innerHTML]="errorMessage">
       {{ errorMessage }}
 </div>

ts 的变化

  errorMessage = ""; <-- You can make it array if you want to store multiple errors.
  checkTabsNewLines = ( str ) => {
    const reN = /[\n]/mg;
    const reT = /[\t]/mg;
    if (((str || '').match(reN) || []).length === ((str || '').match(reT) || []).length - 1) {
      this.errorMessage = "It has tab lines";
      return true;
    } else {
      return false;
    }

  }

  checkTabsNewLinesSuggestedQ = ( str ) => {

  if(true){ . //set the message if function returns true.
    this.errorMessage = "checkTabsNewLinesSuggestedQ message"; /<--set message
  }     

  ........return false/true}

  checkEmptyVal = ( str: string ) => {
    if(true){ . //set the message if function returns true.
      this.errorMessage = "checkEmptyVal message"; /<--set message
    } 
    ....... return false/true
  }

【讨论】：