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

@Component({
  selector: 'my-app',
  template: `
  <form>
  <div *ngFor="let data of dataList; index as i;">
    <label for="inputDescription{{i}}">Description</label>
    <sample-input
      [(ngModel)]="data.description"
      [ngModelOptions]="{ standalone: true }"
      [index]="i"></sample-input>
    <button type="button" (click)="removeData(i)">Remove</button>
  </div>
  <div>
    <button type="button" (click)="addData()">Add</button>
  </div>
  <div>
    <pre>{{ dataList | json }}</pre>
  </div>
</form>
  `
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  dataList = [];

  addData() {
    this.dataList.push({ description: '' });
  }

  removeData(index) {
    this.dataList.splice(index, 1);
  }
}

import { Component, StaticProvider, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgForm, ControlContainer } from '@angular/forms';

export const SAMPLE_INPUT_VALUE_ACCESSOR: StaticProvider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SampleInputComponent),
  multi: true
};

@Component({
  selector: 'sample-input',
  template: `<input type="text" id="inputDescription{{ index }}" [(ngModel)]="value" name="inputDescription{{ index }}" />`,
  providers: [SAMPLE_INPUT_VALUE_ACCESSOR],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class SampleInputComponent implements ControlValueAccessor {

  @Input() index;

  private onChange: (_: any) => { };
  private onTouched: () => { };
  private _value: any;

  public get value() {
    return this._value;
  }

  public set value(value: any) {
    this._value = value;
    this.onChange(value);
  }

  writeValue(obj: any): void {
    this._value = obj;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {

  }
}