Angular support for reactive forms

[martinbojnansky]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

When it comes to Angular, it would be great to add support for native reactive forms. Reactive forms are used to write dynamic forms with two-way data bindings, validations and more.
It is quite simple to extend the stencil generated directives and I made an example for couple of components I used already.

Acceptance Criteria

Components that are used for user input should:

1. Implement ControlValueAccessor interface.
2. Update its value on form value change.
3. Emit "touched" event on blur and value change.
4. Emit "changed" event, so the form value is updated.
5. Be enabled/disabled when form value is enabled/disabled.

Relevant Info

I (reporter) would be willing to work on this and support the implementation with unit tests.

Which Component

• Checkbox
• ColorPicker
• Combobox
• DatePicker
• Input
• PickList
• RadioButton
• RadioButtonGroup
• Rating
• SegmentedControl
• Select
• Slider
• TileSelectGroup

Example Use Case

<form [formGroup]="form">
  <calcite-label>
    ...
    <calcite-input-text
      [formControl]="form.controls.text"
    ></calcite-input-text>
    <calcite-input-message
      *ngIf="form.controls.text.invalid"
      icon="frown"
      status="invalid"
    >
      Title must be at least 5 characters long.
    </calcite-input-message>
  </calcite-label>
</form>

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[geospatialem]

A spike will be conducted in early 2024, however @martinbojnansky we'd love your expertise if you are willing to tackle this prior to the new year, too. Thanks for filing! 💪🏻

[geospatialem]

Blocked by #10310

[benelan]

Closing this as unplanned.

We are migrating from Stencil to Lit, which doesn't provide the same tools for creating Angular wrapper components. Therefore, the @esri/calcite-components-angular package is being removed as part of the upcoming v3 breaking change release.

For reference, the angular example has been updated to use @esri/calcite-components directly.

[github-actions]

Issue #10310 has been closed, this issue is ready for re-evaluation.

cc @geospatialem,@DitwanP