Dynamic form

gistfile1.txt

import { Component, ViewContainerRef  } from '@angular/core';
import { FormGroup } from '@angular/forms';

import { Field } from '../../models/field.interface';
import { FieldConfig } from '../../models/field-config.interface';

@Component({
  selector: 'app-form-input',
  styleUrls: ['form-input.component.scss'],
  template: `
    <div class="form__field__wrapper">
      <div
        class="form__input__wrapper form__input__wrapper--{{config.size}}"
        [ngClass]="{'form__input__wrapper--filled': 'inputValue.value.length > 0'}"
        [formGroup]="group">
        <label class="form__input__label">
          <span class="form__input__label__content">{{ config.label }}</span>
        </label>
        <div *ngIf="inputValue.value.length > 0">Field is not empty</div>
        <input
          #inputValue
          class="form__input form__input--text"
          type="text"
          [attr.placeholder]="config.placeholder"
          [formControlName]="config.name"
        >
      </div>
      <div class="form__field__error__wrapper" ngxErrors="{{config.name}}">
        <div class="form__field__error" ngxError="required" when="touched">
          {{ config.label }} is required
        </div>
        <div class="form__field__error" ngxError="minlength" [when]="['dirty', 'touched']">
          Min length is {{config.minlength}}
        </div>
      </div>
    </div>
  `
})
export class FormInputComponent implements Field {
  config: FieldConfig;
  group: FormGroup;

  constructor() {
  }
}