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

debugcn 发表于 Dev

KNVB

我的源代码可以通过以下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}，我如何读取该属性？

dev布兰登

我认为您无法解决问题。记住在typescript中设置为自定义验证的返回类型的内容

{[key：string]：任意}

这是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。