// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgxMessagesModule } from "ngx-messages"; // <-- import the module
import { MyComponent } from "./my.component";

@NgModule({
  imports: [
    BrowserModule,
    NgxMessagesModule, // <-- include it in your app module
  ],
  declarations: [MyComponent],
  bootstrap: [MyComponent],
})
export class MyAppModule {}

// my.component.ts
import { Component, OnInit } from "@angular/core";
import {
  FormBuilder,
  FormGroup,
  Validators,
  AbstractControl,
} from "@angular/forms";

@Component({
  selector: "my-component",
  template: `
    <form novalidate [formGroup]="myForm" (ngSubmit)="checkEmail()">
      <input formControlName="email" placeholder="Email" type="email" />
      <div val-messages="email">
        <span val-message="required">Please provide email address</span>
        <span val-message="server" useErrorValue="true"></span>
      </div>
      <button type="submit">Check email</button>
    </form>
  `,
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private _fb: FormBuilder, private backendService: any) {}

  ngOnInit() {
    this.myForm = this._fb.group({
      email: ["", Validators.required],
    });
  }

  checkEmail() {
    this.backendService.checkEmail().subscribe((result) => {
      if (result.error) {
        // server returns actual message for the error.
        // Setting attribute `useErrorValue` allows to use it directly
        addError(this.myForm.get("email"), { server: result.error });
      }
    });
  }
}

function addError(control: AbstractControl, error: { [key: string]: any }) {
  const updatedErrors = Object.assign({}, control.errors, error);
  control.setErrors(updatedErrors);
}

@NgModule({
  imports: [
    BrowserModule,
    NgxMessagesModule.configure({
      showErrorsOnlyIfInputDirty: false,
      showErrorsWhenFormSubmitted: true,
    }),
  ],
  declarations: [MyComponent],
  bootstrap: [MyComponent],
})
export class MyAppModule {}