<form #myForm="ngForm">
  <div>
    <label>Birth Year</label>
    <vng-controls-textbox #user="ngModel" name="user" minlength="5" ngModel ></vng-controls-textbox>

    <label>Text</label>
    <vng-controls-textbox #text="ngModel" name="text" maxlength="5" ngModel ></vng-controls-textbox>
  </div>

   <div vng-control-group [icon]="['fa','user']">
        <vng-controls-textbox required type="text" #username="ngModel" ngModel name="Username">
        </vng-controls-textbox>
        <vng-controls-textbox required type="password" #password="ngModel" ngModel name="Passwort">
        </vng-controls-textbox>
   </div>
</form>

import { Component, OnInit, EventEmitter, Input, Output, forwardRef, AfterViewInit, Self } from '@angular/core';
import { Validator, ControlValueAccessor, FormControl, NgControl } from '@angular/forms';

@Component({
    selector: 'app-base'
})
export class BaseComponent implements OnInit, ControlValueAccessor, Validator, AfterViewInit//, IControlBase<any>
{
    public ngControl: any;
    private parseError: boolean;
    private _value: any = '';

    /** Input value */
    @Input() set value(newValue: any) {
        if (newValue != this._value && newValue !== undefined) {
            console.log("[BaseComponent]: Set value " + newValue);
            this.valueChange.emit(newValue);
            this._value = newValue;
        }

    };
    get value(): any {
        if (this._value) {
            return this._value;
        }
    }
    /** Platzhalter */
    @Input() placeholder: any;

    /** Disabled */
    @Input() disabled: boolean;

    /** Name des Controls */
    @Input() name: string;

    /** Optional: Typ des Controls (Text, Password) */
    @Input() type?: string;

    @Input() hideErrors: boolean = false;

    @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();

    // this is the initial value set to the component
    public writeValue(obj: any) {
        if (obj !== undefined && obj) {
            console.log("[BaseComponent] writeValue ", obj)
            this._value = obj;
        }
    }

    // registers 'fn' that will be fired wheb changes are made
    // this is how we emit the changes back to the form
    public registerOnChange(fn: any) {
        this.propagateChange = fn;
    }

    // validates the form, returns null when valid else the validation object
    // in this case we're checking if the json parsing has passed or failed from the onChange method
    public validate(c: FormControl) {

        return null;
    }

    // not used, used for touch input
    public registerOnTouched() { }

    // change events from the textarea
    private onChange(event) {

        if (event.target.value !== undefined) {
            console.log("[BaseComponent] "+this.name+" OnChange " + event.target.value)
            // get value from text area
            this._value = event.target.value;
            this.propagateChange(this._value);
        }

    }

    // the method set in registerOnChange to emit changes back to the form
    private propagateChange = (_: any) => { };

    registerOnValidatorChange?(fn: () => void): void {
        console.log("[BaseComponent]: registerOnValidatorChange");
    }
    setDisabledState?(isDisabled: boolean): void {
        console.log("[BaseComponent]: setDisabledState");
    }

    constructor(@Self() ngControl: NgControl) {
        ngControl.valueAccessor = this;
        if (ngControl) {
            this.ngControl = ngControl;
        }
    }
    ngOnInit() {

    }
    ngAfterViewInit(): void {
        //debugger;
        //this.placeholder = this.translateService.instant((this.placeholder ? this.placeholder : this.name))
    }

}

import { Component, OnInit, Input, Host, Self } from '@angular/core';
import { ControlContainer, FormControl, AbstractControl, NgControl } from '@angular/forms';
import { BaseComponent } from '../../_bases/base.component'
import { QueryList, ViewChildren, ContentChildren, TemplateRef, ContentChild } from '@angular/core';

import { TextboxComponent } from '../textbox/textbox.component';

/**
 * Komponente für Input-Groups
 * @example
 *  <div vng-control-group [config]="textboxUsernameConfig">
 *      // Kann ein diverses Control sein, was als CSS-Klasse "form-control besitzt"
 *      <input class="input form-control" />
 *  </div>
 *
 *  // oder
 *
 *  <div vng-control-group [icon]="['fa','user']" [label]="Test Label" [position]="'append'">
 */
@Component({
  selector: 'div[vng-control-group]',
  templateUrl: './control-group.component.html'
})

export class ControlGroupComponent {
    private controlContainer: ControlContainer;
    public formControl: AbstractControl;

    @ContentChild(TemplateRef) template: TemplateRef<any>;

    ngAfterContentInit() {

    }

    /** Konfiguration der Inputgroup als Objekt */
    @Input() config: InputGroupConfig;

    /** Icon als Attribut (z.B. im HTML) */
    @Input() icon?: object;

    /** Label als Attribut (z.B. im HTML) */
    @Input() label?: string;

    /** Position als Attribut (z.B. im HTML) */
    @Input() position?: GroupPosition;

    constructor(@Host() parent: ControlContainer) {
        //this.controlContainer = parent;
        //this.formControl = this.controlContainer.control;
    }

    ngOnInit() {

        // Wenn kein Konfig-Objekt übergeben worden ist, setze die Attribute bzw. setze Default-Werte
        if (!this.config) {
            console.log("[ControlGroupComponent]: Keine Config übergeben")
            this.config = {
                icon: this.icon || ['fa', 'question'],
                label: this.label || '',
                position: this.position || GroupPosition.prepend
            }
        }
    }
}


export interface InputGroupConfig {
    icon?: object,
    label?: string,
    position?: GroupPosition
}

export enum GroupPosition {
    append = 'append',
    prepend = 'prepend'
}

<div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <ng-content></ng-content>
    </div>

Show error component (ts/html):
// show-errors.component.ts
import { Component, Input } from '@angular/core';
import { AbstractControlDirective, AbstractControl } from '@angular/forms';

@Component({
 selector: 'show-errors',
 template: `
   <ul *ngIf="shouldShowErrors()">
     <li style="color: red" *ngFor="let error of listOfErrors()">{{error}}</li>
   </ul>
 `,
})
export class ShowErrorsComponent {

 private static readonly errorMessages = {
   'required': () => 'This field is required',
   'minlength': (params) => 'The min number of characters is ' + params.requiredLength,
   'maxlength': (params) => 'The max allowed number of characters is ' + params.requiredLength,
   'pattern': (params) => 'The required pattern is: ' + params.requiredPattern,
   'years': (params) => params.message,
   'countryCity': (params) => params.message,
   'uniqueName': (params) => params.message,
   'telephoneNumbers': (params) => params.message,
   'telephoneNumber': (params) => params.message
 };

 @Input()
 private control: AbstractControlDirective | AbstractControl;

 shouldShowErrors(): boolean {
   return this.control &&
     this.control.errors &&
     (this.control.dirty || this.control.touched);
 }

 listOfErrors(): string[] {
   return Object.keys(this.control.errors)
     .map(field => this.getMessage(field, this.control.errors[field]));
 }

 private getMessage(type: string, params: any) {
   return ShowErrorsComponent.errorMessages[type](params);
 }

}