vadimkorr

import { Component, Input, ViewChild, ElementRef, Renderer2, forwardRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'custom-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements ControlValueAccessor {

vadimkorr

...
@Component({
  selector: 'custom-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => InputComponent),
    multi: true,
  }]

vadimkorr

<div class="form-group group">
  <label
    [for]="id"
    [ngClass]="{ 'required': isRequired }">{{label}}</label>
  <ng-content></ng-content>
</div>

vadimkorr

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

@Component({
  selector: 'custom-labeled',
  templateUrl: './labeled.component.html',
  styleUrls: ['./labeled.component.css']
})
export class LabeledComponent {
  @Input() label: string = '';
  @Input() id: string = '';

vadimkorr

<custom-labeled
  class="catch-validation-events"
  [label]="label"
  [id]="id"
  [isRequired]="isRequired">

  <custom-input
    #input
    [(ngModel)]="value"
    [type]="type"

vadimkorr

import { Component, OnInit, forwardRef, Input, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { InputComponent } from '../input/input.component';

@Component({
  selector: 'custom-labeled-input',
  templateUrl: './labeled-input.component.html',
  styleUrls: ['./labeled-input.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,

vadimkorr

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { InputComponent } from './components/input/input.component';
import { LabeledComponent } from './components/labeled/labeled.component';
import { LabeledInputComponent } from './components/labeled-input/labeled-input.component';

@NgModule({
  imports: [ CommonModule, FormsModule ],

vadimkorr

import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ComponentFixture, TestBed, tick, async, fakeAsync } from '@angular/core/testing';
import { CustomControlsModule } from '../../custom-controls.module';

@Component({
  template: `
    <custom-input [placeholder]="placeholder" [type]="type" [id]="id" [(ngModel)]="name"></custom-input>
  `
})

vadimkorr

<custom-labeled-input formControlName="field1" [isRequired]="true" [type]="'text'"
  [id]="'field1'" [placeholder]="'Enter Field #1'" [label]="'Field #1'"></custom-labeled-input>

vadimkorr

<div class="form-group">
  <label for="field1-od" class="required">Field #1</label>
  <input formControlName="field1" type="text"
    id="field1-od" placeholder="Enter Field #1">
</div>