title: Angular 5 form validation. to check existing word
body: <p>I have a simple form with one input. </p>
  
  <p>I need to check that user doesn't enter an existing word. </p>
  
  <p>If the user enters the word, I want to show a message below the input field like "This word already exists!". it is desirable not to use reactive forms
  <a href="https://i.stack.imgur.com/9iuQk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9iuQk.png" alt="enter image description here"></a></p>
  
  <p>any support appreciated</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Inject } from "@angular/core";
  import { FormBuilder, FormGroup } from "@angular/forms";
  import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
  
  @Component({
    selector: "app-tag-dialog",
    templateUrl: "./tag-dialog.component.html",
    styleUrls: ["../../styles/dialog.scss"]
  })
  export class TagDialogComponent {
    form: FormGroup;
  
    constructor(
      private formBuilder: FormBuilder,
      private matDialogRef: MatDialogRef&lt;TagDialogComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: any
    ) {
      this.createForm();
    }
  
    createForm() {
      this.form = this.formBuilder.group({ tag: "" });
    }
  
    submit(form: any) {
      this.matDialogRef.close(form.value);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dialog mat-typography"&gt;
    &lt;h1 mat-dialog-title&gt;{{ data.action }} tag&lt;/h1&gt;
    &lt;form [formGroup]="form" (ngSubmit)="submit(form)"&gt;
      &lt;div mat-dialog-content&gt;
        &lt;div class="dialog__row"&gt;
          &lt;mat-form-field class="dialog__input"&gt;
            &lt;input matInput placeholder="Tag" formControlName="tag" required&gt;
            &lt;mat-error *ngIf="form.controls.tag.invalid"&gt;Tag is required&lt;/mat-error&gt;
            &lt;mat-error *ngIf="............."&gt;This word already exists&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div mat-dialog-actions class="dialog__row dialog__row--actions"&gt;
        &lt;button mat-button type="reset" color="primary" mat-dialog-close&gt;CANCEL&lt;/button&gt;
        &lt;button mat-button type="submit" color="primary" [disabled]="!form.valid"&gt;OK&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>