🟠 Control Value Accessor

Information

In this challenge, the goal is to create a custom form field that is using the Form API of Angular ControlValueAccessor. You can find the documentation here. This interface is crucial for creating custom form controls that can interact seamlessly with Angular’s forms API.

Statement

The primary goal is to use control in the feedbackForm to eliminate the need for using @Output to retrieve the value and inject it into the FormGroup. Additionally, you are required to integrate validation for the new control to ensure that rating data exist. (The form submission button should be disabled if the form is invalid).

Currently, rating is coded this way:

<app-rating-control (ratingUpdated)="rating = $event"></app-rating-control>

rating: string | null = null;

onFormSubmit(): void {
  this.feedBackSubmit.emit({
    ...this.feedbackForm.value,
    rating: this.rating, // not inside the FormGroup and no validation
  });
}

The goal is to include rating into the FormGroup

<app-rating-control [formControl]="feedbackForm.controls.rating"></app-rating-control>