Angular Form Control Creation Challenge

This challenge focuses on building a fundamental part of Angular applications: interactive forms. You will create a reusable form control component that can be integrated into various Angular forms, demonstrating a solid understanding of Angular's reactive forms and component development.

Problem Description

Your task is to create a custom Angular form control component. This component should encapsulate a common input field, such as a text input, and integrate seamlessly with Angular's Reactive Forms API. This means it needs to be able to:

• Display a value: Show the current value of the form control.
• Update a value: Allow users to input data, which should update the form control's value.
• Integrate with FormControl: Implement the ControlValueAccessor interface to enable it to work with FormControl, FormGroup, and FormArray.
• Handle user interactions: Respond to native input events.
• Provide styling hooks: Allow for basic styling to indicate valid/invalid states.

This component will be invaluable for creating complex forms with consistent styling and behavior across your Angular application.

Examples

Example 1: Basic Text Input

// In a parent component's template:
<form [formGroup]="myForm">
  <app-custom-input formControlName="username"></app-custom-input>
</form>

// In the parent component's TypeScript:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

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

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      username: ['Initial Name'] // Pre-populated value
    });
  }
}

Expected Behavior:

The app-custom-input component will render an <input type="text">. It will display "Initial Name" by default. When the user types into the input, the username form control in myForm should update accordingly.

Example 2: Handling Empty Input

// In a parent component's template:
<form [formGroup]="myForm">
  <app-custom-input formControlName="email"></app-custom-input>
</form>

// In the parent component's TypeScript:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      email: ['', Validators.email] // Initially empty, with email validator
    });
  }
}

Expected Behavior:

The app-custom-input component will render an <input type="text">. It will be initially empty. When the user enters a valid email address, the email form control will be marked as valid. If the user clears the input, or enters an invalid email, the form control's validity state should reflect this.

Constraints

• The custom form control must implement the ControlValueAccessor interface from @angular/forms.
• The component should render a single native <input type="text"> element.
• The component should be styled to visually indicate its validity state (e.g., a red border for invalid).
• The component should accept an id attribute as an @Input() to be applied to the native input element.
• The component should emit an (input) event when the user types.

Notes

• You'll need to import NG_VALUE_ACCESSOR and ControlValueAccessor from @angular/forms.
• The registerOnChange and registerOnTouched methods of ControlValueAccessor are crucial for connecting your component to the Angular forms API.
• Consider how you will handle the value property and propagate changes.
• Think about how you will access the validity state of the form control from within your component. You might need to inject NgControl.
• The id input should be used to set the id attribute on the underlying <input> element, facilitating accessibility and label association.