Как сделать Reactive form в таблице с динамическим добавлением и удалениеям ряда?

Question

Виталий Мудрый @tapinambur0508

HTML
Angular

Как сделать Reactive form в таблице с динамическим добавлением и удалениеям ряда?

Всем привет. Хочу разобратся с Reactive form и решыл сделать таблицу статистики. В этой таблице можно удалять и добавлять ряд. Сначала сделал одним компонентом, но потом решыл винести ряд в отдельный. Вот мой код:

Data table HTML

<form [formGroup]="statsForm" (ngSubmit)="saveStats(statsForm.value)">
 <table class="table table-responsive">
  <thead>
   <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    </tr>
   </thead>
   <tbody formArrayName="itemRows">
    <tr *ngFor="let row of statsForm.get('itemRows').controls; let i = index" app-data-table-row [formGroupName]="i" [parentGroup]="statsForm.get('itemRows')" [index]="i">
    </tr>
   </tbody>
  </table>
   <div class="stats-control">
     <button type="submit" class="btn btn-success" [disabled]="!statsForm.valid">
       <i class="fas fa-save"></i>
     </button>
     <button type="button" class="btn btn-primary" (click)="addRow()">
       <i class="fas fa-plus"></i>
     </button>
   </div>
 </form>

Data table ts

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.scss']
})
export class DataTableComponent implements OnInit {
  statsForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.statsForm = this.formBuilder.group({
      itemRows: this.formBuilder.array([this.initItemRows()])
    });
  }

  initItemRows() {
    return this.formBuilder.group({
      spent: [null, Validators.compose([Validators.required, Validators.pattern(/^[1-9]{1}[0-9]*(\.[0-9]+)?$/)])],
      revenue: [null, Validators.compose([Validators.required, Validators.pattern(/^[1-9]{1}[0-9]*(\.[0-9]+)?$/)])]
    });
   }

   addRow() {
    const control = <FormArray>this.statsForm.controls['itemRows'];

    control.push(this.initItemRows());
  }
}

Data table row HTML

<td>
  <input class="form-control" formControlName="spent" placeholder="Spent">
</td>
<td>
  <input class="form-control" formControlName="revenue" placeholder="Revenue">
</td>

Data table row ts

@Component({
  selector: '[app-data-table-row]',
  templateUrl: './data-table-row.component.html',
  styleUrls: ['./data-table-row.component.scss']
})
export class DataTableRowComponent implements OnInit, OnChanges {
  @Input('parentGroup') parentGroup;
  @Input('index') index;
});

После запуска выводит ошыбку Error: formControlName must be used with a parent formGroup directive. Как правильно завернуть столбцы в formGroup, что бы не нарушелась таблица. Помогите пожалуйста. Спасибо