title: How to display custom validation error message
body: <p>For my form it has just one input and that's a text area, where the user enters in JSON Code and if the Text is not Valid JSON it should display an error message but for some reason it wont work.</p>
  
  <p><strong>Here's my custom validator:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
  
  export function jsonValidator(control: AbstractControl): ValidationErrors | null {
    try {
      JSON.parse(control.value);
    } catch (e) {
      console.log("Not Valid JSON");
      return { jsonInvalid: true };
    }
  
    return null;
  };
  </code></pre>
  
  <p><strong>Here is the .ts File</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, Validators, FormGroup } from '@angular/forms';
  import { jsonValidator } from 'src/app/Validators/jsonValid';
  
  @Component({
    selector: 'app-email-body-editor',
    templateUrl: './email-body-editor.component.html',
    styleUrls: ['./email-body-editor.component.scss']
  })
  export class EmailBodyEditorComponent implements OnInit {
  
    errorMsg : string = "Not VALID JSON";
  
    form = this.fb.group({
      jsonField: [null, [Validators.required , jsonValidator]]
  
    });
  
    constructor(private fb: FormBuilder) {
    }
  
    submit(): void {
      console.log(this.form);
    }
  
    ngOnInit(): void {
  
    }   
  }
  </code></pre>
  
  <p><strong>And Finally the HTML File</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form" (submit)="submit()"&gt;
  
      &lt;mat-form-field appearance="fill"&gt;
  
          &lt;mat-label&gt;Textarea&lt;/mat-label&gt;
          &lt;textarea matInput
              formControlName="jsonField" 
              cols="1000" 
              placeholder="my custom json here" 
              cdkTextareaAutosize 
              cdkAutosizeMinRows="10"
              cdkAutosizeMaxRows="50"&gt;
          &lt;/textarea&gt;
      &lt;/mat-form-field&gt;
      &lt;br&gt;
  
      &lt;div *ngIf="form.controls.jsonField.hasError('jsonValidator')"&gt;
          {{errorMsg}} 
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>