Dynamic Forms — FormArray and Programmatic Control Management

FormArray manages a dynamic list of form controls — adding and removing controls at runtime in response to user actions. The post form’s tags are a classic FormArray use case: the user starts with one tag input and can add more or remove any. Unlike a fixed FormGroup, FormArray’s length is not known at form creation time. Angular 14+’s typed forms give FormArray a typed parameter: FormArray<FormControl<string>> means each element is a FormControl of type string.

FormArray — Dynamic Tags #

import { FormBuilder, FormArray, FormControl,
         Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector:   'app-post-form',
  standalone:  true,
  imports:    [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">

      <!-- Static fields ───────────────────────────────────────────────── -->
      <input formControlName="title">
      <textarea formControlName="body"></textarea>

      <!-- ── FormArray section ─────────────────────────────────────────── -->
      <div formArrayName="tags">  <!-- bind to the FormArray by name ──── -->
        <h3>Tags</h3>

        @for (ctrl of tagsArray.controls; track $index; let i = $index) {
          <div class="tag-row">
            <input [formControlName]="i"  <!-- index as the control name ── -->
                   placeholder="Tag name"
                   [class.is-invalid]="ctrl.invalid && ctrl.touched">

            @if (ctrl.hasError('maxlength')) {
              <span class="error">Max 50 characters.</span>
            }

            <button type="button" (click)="removeTag(i)"
                    [disabled]="tagsArray.length === 1">×</button>
          </div>
        }

        <button type="button" (click)="addTag()"
                [disabled]="tagsArray.length >= 10">
          + Add Tag
        </button>
      </div>

      <button type="submit" [disabled]="form.invalid">Save Post</button>
    </form>
  `,
})
export class PostFormComponent {
  private fb = inject(FormBuilder);

  form = this.fb.nonNullable.group({
    title: ['', [Validators.required, Validators.minLength(5)]],
    body:  ['', [Validators.required, Validators.minLength(50)]],
    // Typed FormArray of string controls
    tags:  this.fb.array([
      this.fb.nonNullable.control('', Validators.maxLength(50)),  // start with one
    ]),
  });

  // Typed accessor — cleaner than form.get('tags') as FormArray
  get tagsArray(): FormArray<FormControl<string>> {
    return this.form.controls.tags;
  }

  addTag(): void {
    if (this.tagsArray.length < 10) {
      this.tagsArray.push(this.fb.nonNullable.control('', Validators.maxLength(50)));
    }
  }

  removeTag(index: number): void {
    if (this.tagsArray.length > 1) {
      this.tagsArray.removeAt(index);
    }
  }

  onSubmit(): void {
    if (this.form.invalid) { this.form.markAllAsTouched(); return; }
    const data = this.form.getRawValue();
    // data.tags is string[] — non-empty tags only
    const tags = data.tags.filter(t => t.trim().length > 0);
    console.log('Submitting:', { ...data, tags });
  }
}

Common Mistakes #

Mistake 1 — Accessing FormArray without a typed getter (runtime errors from as FormArray casts) #

❌ Wrong — (form.get('tags') as FormArray).push(...) — unsafe cast, no type inference.

✅ Correct — typed getter: get tagsArray(): FormArray<FormControl<string>> { return this.form.controls.tags; }

Mistake 2 — Using formControlName without formArrayName context (template error) #

❌ Wrong — [formControlName]="i" outside a formArrayName context; Angular cannot find the control.

✅ Correct — always wrap array control bindings inside a formArrayName parent.