Fix FormControl implementation for Input component LTS version

[Copilot]

Problem

The Input component documentation for the LTS version (v3.2.2) was showing incomplete FormControl implementation in the reactive forms sandbox example. While the TypeScript code correctly showed itemFormCtrl = new FormControl(""), the HTML template was displaying [value]="value" instead of the proper FormControl binding.

Closes #2809

Root Cause

The issue was in the AngularReactiveSerializer where the ReactiveComponents array only included new version component names (goab-input, goab-textarea, etc.) but not the old version names (goa-input, goa-textarea, etc.).

When the serializer processes components for the LTS version:

1. Component names get converted from GoabInput → goa-input (old version)
2. The modifyProps method checks if the component is in ReactiveComponents array
3. Since only goab-input was listed, goa-input components weren't recognized as reactive
4. No FormControl bindings were added to the template

Solution

Updated the ReactiveComponents array in AngularReactiveSerializer.ts to include both old and new version component names:

const ReactiveComponents = [
  "goa-input",    // old version
  "goab-input",   // new version
  "goa-textarea", // old version
  "goab-textarea", // new version
  // ... etc for all reactive components
];

Results

Before (LTS version)

• TypeScript: ✅ itemFormCtrl = new FormControl("")
• Template: ❌ <goa-input name="item" [value]="value" width="20ch">

After (LTS version)

• TypeScript: ✅ itemFormCtrl = new FormControl("")
• Template: ✅ <goa-input name="item" [formControl]="itemFormCtrl" [value]="itemFormCtrl.value" width="20ch">

Current version (v4.0.0+) - Unaffected

• Still correctly shows FormGroup implementation with formControlName="item"

Testing

• ✅ Built successfully with no TypeScript errors
• ✅ LTS version now shows proper FormControl binding in reactive forms
• ✅ Current version functionality remains unchanged
• ✅ All other reactive components (textarea, dropdown, etc.) will also benefit from this fix


---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[netlify]

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	5dab8ba
🔍 Latest deploy log	https://app.netlify.com/projects/abgov-ui-component-docs/deploys/68781dc9d638320009a73532
😎 Deploy Preview	https://deploy-preview-401--abgov-ui-component-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.