How to get the angular form validation error message?

Question

My source code can be access by the following URL:

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

I want to ask the following coding:

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

Why the "logRecipients.errors.required" report the following error?

Cannot read property 'required' of null

Why the "logRecipients.errors.logRecipientValidator" prompt the following error?

Cannot read property 'logRecipientValidator' of null

I want to get the built-in "required" validator result to decide whether the "Appreciation Log Recipients is required" message is shown.

I want to get my custom validator result to decide whether the "Invalid email address" message is shown. In case, the validation failed, my validator would return an object {email:true}, how can I read this attribute?

Answer 1

I want to get my custom validator result to decide whether the "Invalid email address" message is shown. In case, the validation failed, my validator would return an object {email:true}, how can I read this attribute?

I think you are way over complicating it. Remember what you set in typescript as the return type of the custom validation

{[key: string]: any}

This is javascript. You can attach anything as a key value pair and grab that value reference using a string for the key. You can change the logic of the validation to alter the message based on what you want or return something new entirely. Just make sure your template accounts for all the scenarios. Below is an example of returning a message from the validation function:

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>