如何获取 angular 表单验证错误信息？

Question

我的源代码可以通过以下方式访问URL:

https://stackblitz.com/edit/angular-aidmpq?file=src%2Fapp%2Fapp.component.html

我想请教以下编码：

<mat-error *ngIf="logRecipients.errors.required">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients.errors.logRecipientValidator">
    Invalid email address
  </mat-error>

为什么"logRecipients.errors.required"报如下错误？

Cannot read property 'required' of null

为什么"logRecipients.errors.logRecipientValidator"提示如下错误？

Cannot read property 'logRecipientValidator' of null

我想获取内置的 "required" 验证器结果来决定是否显示 "Appreciation Log Recipients is required" 消息。

我想获取我的自定义验证器结果来决定是否显示 "Invalid email address" 消息。万一验证失败，我的验证器会 return 一个对象 {email:true}，我如何读取这个属性？

Answer 1

您应该首先检查logRecipients.errors是否为空、null或未定义，然后检查具体错误。

所以像下面这样更改您的代码：

第 14 行有 2 处更改：

错误对象内部需要验证，因此将 <mat-error *ngIf="logRecipients.required"> 更改为 <mat-error *ngIf="logRecipients.errors.required">。
检查错误对象本身，因此将 <mat-error *ngIf="logRecipients.errors.required"> 更改为 <mat-error *ngIf=" logRecipients.errors && logRecipients.errors.required">

第 17 行有同样的问题（检查错误对象本身），将 *ngIf="logRecipients.errors.logRecipientValidator" 更改为 *ngIf="logRecipients.errors && logRecipients.errors.logRecipientValidator"

完整的工作代码：

  <form #callTreeEditForm="ngForm" (ngSubmit)="onSubmit(callTreeEditForm)">
    <mat-form-field style="width:250px">
      <mat-label>Appreciation Log Recipients</mat-label>
      <textarea matInput
                cdkTextareaAutosize
                #autosize="cdkTextareaAutosize"
                cdkAutosizeMinRows="1"
                cdkAutosizeMaxRows="5"
                required
                name="logRecipients"
                #logRecipients="ngModel"
                logRecipientValidator
                [(ngModel)]="this.callTree.logRecipients"></textarea>
      <mat-error *ngIf="logRecipients.errors &&logRecipients.errors.required">
        Appreciation Log Recipients is <strong>required</strong>
      </mat-error>
      <mat-error *ngIf="logRecipients.errors && logRecipients.errors.logRecipientValidator">
        Invalid email address
      </mat-error>
    </mat-form-field>

  </form>

希望对您有所帮助。 :)

Answer 2

在某些时候 logRecipients 未定义，要解决这个问题，只需检查它是否存在，然后对该对象进行后续属性检查。

  <mat-error *ngIf="logRecipients && logRecipients.required">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients && logRecipients.errors && logRecipients.errors.logRecipientValidator">
    Invalid email address
  </mat-error>

Answer 3

只需使用 angular 已经为我们提供... template expression operator ( ? )。所以现在，您通过将它们设为可选来检查属性是否已定义。

<mat-error *ngIf="logRecipients?.errors?.logRecipientValidator">
    Invalid email address
</mat-error>

Answer 4

抱歉，我忘记将指令添加到 app.module.ts。

我找到了如下解决方案：

  <mat-error *ngIf="logRecipients.hasError('required')">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients.hasError('email')">
    Invalid email address
  </mat-error>

工作代码可以通过以下方式访问URL:

https://stackblitz.com/edit/angular-aidmpq?file=src%2Fapp%2Fapp.component.html

Answer 5

我想获取我的自定义验证器结果来决定是否显示 "Invalid email address" 消息。万一验证失败，我的验证器会 return 一个对象 {email:true}，我如何读取这个属性？

我认为你把它复杂化了。记住你在打字稿中设置的自定义验证return类型

{[key: string]: 任意}

这是javascript。您可以将任何内容附加为键值对，并使用字符串作为键来获取该值引用。您可以更改验证逻辑以根据您想要的内容或 return 完全新的内容来更改消息。只需确保您的模板考虑了所有场景。下面是 return 从验证函数发送消息的示例：

validate(control: AbstractControl): {[key: string]: any}|null {
if ((control.dirty) && (control.valid)) {
  const logRecipients = control.value.trim().split('\n');
  const tempBox = this.renderer2.createElement('input');
  let result = null;
  tempBox.type = 'text';

  for (const logRecipient of logRecipients) {
    tempBox.value = logRecipient;
    result = (Validators.email(tempBox));
    // console.log(logRecipient + ',' + result);
    if (result != null) {
      break;
    }
  }
  // console.log('Return :' + result);
  console.log(result);
  return {email: 'The email address is invalid. Custom Message'};
} else {
  // console.log('Return null');
  return null;
}

App.component.html

 <form #callTreeEditForm="ngForm" (ngSubmit)="onSubmit(callTreeEditForm)">
<mat-form-field style="width:250px">
  <mat-label>Appreciation Log Recipients</mat-label>
  <textarea matInput
            cdkTextareaAutosize
            #autosize="cdkTextareaAutosize"
            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"
            required
            name="logRecipients"
            #logRecipients="ngModel"
            logRecipientValidator
            [(ngModel)]="this.callTree.logRecipients"></textarea>
  <mat-error *ngIf="logRecipients.hasError('required')">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients.hasError('email')">
    {{logRecipients.errors['email']}}
  </mat-error>
</mat-form-field>

如何获取 angular 表单验证错误信息？

How to get the angular form validation error message?

angular

angular-forms