import { Component } from '@angular/core';
import { FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'bh-dynamic-forms',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `<button type="button" (click)="add()">Add tool line</button
    ><button type="button" (click)="remove()">Remove last line</button>
    @for (control of tools.controls; track control; let index = $index) {
      <label [for]="'tool-' + index">Tool code</label
      ><input [id]="'tool-' + index" [formControl]="control" />
    }
    <p data-result>{{ tools.length }} {{ tools.length === 1 ? 'line' : 'lines' }}</p>`,
})
export class App {
  tools = new FormArray([new FormControl('DR-4', { nonNullable: true })]);
  add(): void {
    if (this.tools.length < 5)
      this.tools.push(new FormControl('CL-2', { nonNullable: true }));
  }
  remove(): void {
    if (this.tools.length > 1) this.tools.removeAt(this.tools.length - 1);
  }
}