Angular Custom Form Control: Implementing ControlValueAccessor

This challenge will guide you through creating a reusable custom form control in Angular by implementing the ControlValueAccessor interface. This is a fundamental skill for building sophisticated forms in Angular, allowing you to integrate third-party UI libraries or create entirely custom input elements that work seamlessly with Angular's ngModel and Reactive Forms.

Problem Description

Your task is to create a custom Angular component that functions as a single-select dropdown (similar to a <select> element) but with a unique visual presentation or custom logic. This component needs to integrate with Angular's forms API, meaning it should support ngModel (template-driven forms) and FormControlName (reactive forms).

To achieve this, you will need to:

1. Create a new Angular component: This component will house your custom dropdown UI.
2. Implement ControlValueAccessor: This interface will enable your component to communicate its value to and from Angular's forms.
3. Handle value changes: Your component must notify the Angular forms API whenever its internal value changes.
4. Respond to external value changes: Your component must update its UI when the value is programmatically set from the outside (e.g., via ngModel or formControl.setValue()).
5. Manage a list of options: The dropdown should accept a list of options (e.g., an array of objects with value and label properties) to display.
6. Provide a way to select an option: The user interaction should allow them to select one option from the list.

Key Requirements:

• The component should accept an @Input() for the list of options. Each option will have a value (which will be the actual data) and a label (which will be displayed to the user).
• The component should emit an event when the user selects a new option.
• The component should be able to display the currently selected option.
• It must correctly integrate with both template-driven (ngModel) and reactive forms.

Expected Behavior:

When the custom component is used in a form:

• If you bind it using [(ngModel)], selecting an option should update the model.
• If you bind it using [formControl] or formControlName, selecting an option should update the form control's value.
• Programmatically setting the form control's value or the ngModel value should update the selected option displayed in your custom component.

Edge Cases to Consider:

• What happens if the list of options is empty?
• What happens if the initial ngModel or form control value does not correspond to any of the provided options?

Examples

Let's imagine a simple custom dropdown component named CustomDropdownComponent.

Example 1: Using [(ngModel)]

Parent Component Template:

<form #myForm="ngForm">
  <app-custom-dropdown
    [options]="myOptions"
    [(ngModel)]="selectedCountryCode"
    name="country"
  ></app-custom-dropdown>
  <button type="submit">Submit</button>
</form>

Parent Component TypeScript:

import { Component } from '@angular/core';

interface DropdownOption {
  value: string;
  label: string;
}

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  myOptions: DropdownOption[] = [
    { value: 'USA', label: 'United States' },
    { value: 'CAN', label: 'Canada' },
    { value: 'MEX', label: 'Mexico' },
  ];
  selectedCountryCode: string = 'CAN'; // Initial value
}

Expected Behavior in the Browser: The CustomDropdownComponent will render, displaying "Canada" as the initially selected option. If the user clicks on it and selects "Mexico", the selectedCountryCode property in the ParentComponent will update to "MEX".

Example 2: Using Reactive Forms

Parent Component Template:

<form [formGroup]="myForm">
  <app-custom-dropdown
    [options]="myOptions"
    formControlName="selectedCity"
  ></app-custom-dropdown>
  <button type="submit">Submit</button>
</form>

Parent Component TypeScript:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

interface DropdownOption {
  value: string;
  label: string;
}

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  myOptions: DropdownOption[] = [
    { value: 'NYC', label: 'New York City' },
    { value: 'LAX', label: 'Los Angeles' },
    { value: 'CHI', label: 'Chicago' },
  ];

  myForm = this.fb.group({
    selectedCity: ['LAX'], // Initial value
  });

  constructor(private fb: FormBuilder) {}
}

Expected Behavior in the Browser: The CustomDropdownComponent will render, displaying "Los Angeles" as the initially selected option. If the user interacts with the dropdown and selects "Chicago", the selectedCity form control in myForm will be updated to "CHI". If you programmatically call this.myForm.get('selectedCity')?.setValue('NYC'), the dropdown UI will update to show "New York City".

Example 3: Edge Case - Empty Options

Parent Component Template:

<form #myForm="ngForm">
  <app-custom-dropdown
    [options]="[]"
    [(ngModel)]="selectedValue"
    name="emptyOptions"
  ></app-custom-dropdown>
</form>

Parent Component TypeScript:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  selectedValue: any;
}

Expected Behavior: The CustomDropdownComponent should gracefully handle the empty options list. It should likely display a disabled state or a placeholder indicating no options are available, and no errors should be thrown. The selectedValue should remain undefined or its initial state.

Constraints

• Your CustomDropdownComponent must be a standalone component or a module component.
• You must use TypeScript.
• The options input property should be typed as an array of objects, where each object has at least a value (of any type) and a label (string).
• The component should not rely on any external UI libraries for its core functionality (you can use basic HTML and CSS for styling).

Notes

• Remember that ControlValueAccessor requires you to implement four methods: writeValue, registerOnChange, registerOnTouched, and setDisabledState.
• writeValue(obj: any): This method is called by Angular to update the component's UI when the model value changes from the outside.
• registerOnChange(fn: any): You need to store the provided function and call it whenever your component's internal value changes. This function is how your component tells Angular "the value has changed."
• registerOnTouched(fn: any): Store this function to call it when the component is considered "touched" (e.g., when the user interacts with it).
• setDisabledState(isDisabled: boolean): This method is called by Angular to enable or disable the form control. Your component should reflect this state visually (e.g., disabling user interactions).
• Consider how you will display the selected option. You'll likely need an internal property to hold the currently selected item's label.
• The value of the option is what gets passed to and from Angular's forms.