D-Net

import { Component, Input, OnInit } from '@angular/core';

import { FormControl } from '@angular/forms';

@Component({

  selector: 'app-validation-message',

  templateUrl: './validation-message.component.html',

  styleUrls: ['./validation-message.component.scss']

})

export class ValidationMessageComponent implements OnInit {

  @Input() control: FormControl;

  @Input() validationMessage: String;

  @Input() set displayEvenIfPristine(val: boolean) {

    this._displayEvenIfPristine = val;

    this.shouldMessageBeShown();

  }

  _displayEvenIfPristine: boolean

  displayMessage: boolean;

  constructor() { }

  ngOnInit(): void {

    this.shouldMessageBeShown();

    this.control.statusChanges.subscribe(() => this.shouldMessageBeShown());

  }

  shouldMessageBeShown() {

    let temp = this.control.invalid && (this.control.dirty || this.control.touched || this._displayEvenIfPristine);

    this.displayMessage = temp;

  }

}