如何获得角度形式验证错误消息？

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

我想获得内置的“必需”验证器结果，以决定是否显示“赞赏日志收件人为必需”消息。

我想获得我的自定义验证器结果，以决定是否显示“无效的电子邮件地址”消息。万一验证失败，我的验证器将返回一个对象{email：true}，我如何读取此属性？

Answer 1

我想获得我的自定义验证器结果，以决定是否显示“无效的电子邮件地址”消息。万一验证失败，我的验证器将返回一个对象{email：true}，我如何读取此属性？

我认为您已经过分复杂了。记住您在typescript中设置为自定义验证的返回类型的内容

{{[key：string]：any}

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

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>

Answer 2

您应先检查logRecipients.errors是否为空，空值或未定义，然后检查特定的错误。

因此，请像下面那样更改代码：

第14行有2处更改：

1. 所需的验证位于错误对象内部，因此将<mat-error *ngIf="logRecipients.required">更改为<mat-error *ngIf="logRecipients.errors.required">。
2. 检查错误对象本身，因此将<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 3

在某个时候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 4

仅使用角度已提供给我们... template expression operator ( ? )。所以现在，通过将属性设为可选来检查属性是否已定义。

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

Answer 5

抱歉，我忘记将指令添加到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