Angular support for reactive forms

[martinbojnansky]

Check existing issues

• [X] 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
• [X] @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! 💪🏻