dancornilov

sudo apt-get update
sudo apt-get install nginx

# default website

dancornilov

<form [formGroup]="form">
  <div class="field">
      <input type="text" formControlName="name" />
    
      <app-validator [control]="form.get('name')"></app-validator>
  </div>
  
  
  <div class="field">
      <input type="text" formControlName="age" />

dancornilov

/**
   * Check if the validator has a custom validation message
   *
   * @param errors
   *
   * @return string
   */
  public message(errors: ValidationErrors | null): string {
    const properties = Object.keys(errors);
    let customMessage: boolean;

dancornilov

import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-validator',
  templateUrl: './validator.component.html',
  styleUrls: ['./validator.component.scss']
})
export class ValidatorComponent implements OnInit {

dancornilov

/**
   * Extract control name from formGroup
   *
   * @return string
   */
  public getControlName(): string {
    let controlName = null;
    const parent = this.control['parent'];

    if (parent instanceof FormGroup) {

dancornilov

"fields": {
    "id": "ID",
    "name": "Name",
    "type": "Type",
    "age": "Age",
    "street_name": "Street name"
}

dancornilov

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

@Component({
  selector: 'app-validator',
  templateUrl: './validator.component.html',
  styleUrls: ['./validator.component.scss']
})
export class ValidatorComponent implements OnInit {
  @Input() public control: FormControl;

dancornilov

import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-validator',
  templateUrl: './validator.component.html',
  styleUrls: ['./validator.component.scss']
})
export class ValidatorComponent implements OnInit {

dancornilov

div.validator {
  visibility: hidden;
  margin-top: 5px;
  min-height: 20px;

  &.show {
    visibility: visible;
  }

  p {

dancornilov

<div [ngClass]="{show: control?.dirty || control?.touched}" class="validator">
    <ng-container *ngIf="control?.errors?.required">
        <p>{{ message(control?.errors) | translate: {field: name} }}</p>
    </ng-container>

    <ng-container *ngIf="control?.errors?.email">
        <p>{{ message(control?.errors) | translate: {field: name} }}</p>
    </ng-container>

    <ng-container *ngIf="control?.errors?.min">