From 47a632167d27969263006c6828f1f1266bfe5952 Mon Sep 17 00:00:00 2001
From: lukasss88 <lukaszszymanski88.99@gmail.com>
Date: Tue, 25 Nov 2025 19:03:11 +0100
Subject: [PATCH] feat: control-value-accessor

---
 .../feedback-form.component.html              |  4 +--
 .../feedback-form/feedback-form.component.ts  | 17 ++++-------
 .../rating-control.component.html             |  2 +-
 .../rating-control.component.ts               | 28 +++++++++++++++----
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html b/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html
index 9334b5bc9..fa2c2c7c1 100644
--- a/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html
+++ b/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html
@@ -13,7 +13,7 @@
     [formControl]="feedbackForm.controls.email"
     placeholder="Email"
     type="email" />
-  <app-rating-control (ratingUpdated)="rating = $event"></app-rating-control>
+  <app-rating-control [formControl]="feedbackForm.controls.rating"></app-rating-control>
   <textarea
     class="feedback-form-control"
     [formControl]="feedbackForm.controls.comment"
@@ -22,7 +22,7 @@
     class="feedback-form-submit"
     type="submit"
     [disabled]="
-      !feedbackForm.touched || rating === null || feedbackForm.invalid
+      !feedbackForm.touched || feedbackForm.invalid
     ">
     Submit
   </button>
diff --git a/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.ts b/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.ts
index 4110d6cf7..5985ee8f5 100644
--- a/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.ts
+++ b/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, output } from '@angular/core';
 import {
   FormControl,
   FormGroup,
@@ -14,9 +14,7 @@ import { RatingControlComponent } from '../rating-control/rating-control.compone
   styleUrls: ['feedback-form.component.scss'],
 })
 export class FeedbackFormComponent {
-  @Output()
-  readonly feedBackSubmit: EventEmitter<Record<string, string | null>> =
-    new EventEmitter<Record<string, string | null>>();
+  feedBackSubmit = output<Record<string, string | null>>();
 
   readonly feedbackForm = new FormGroup({
     name: new FormControl('', {
@@ -25,17 +23,14 @@ export class FeedbackFormComponent {
     email: new FormControl('', {
       validators: Validators.required,
     }),
+    rating: new FormControl('', {
+      validators: Validators.required,
+    }),
     comment: new FormControl(),
   });
 
-  rating: string | null = null;
-
   submitForm(): void {
-    this.feedBackSubmit.emit({
-      ...this.feedbackForm.value,
-      rating: this.rating,
-    });
-
+    this.feedBackSubmit.emit(this.feedbackForm.value);
     this.feedbackForm.reset();
   }
 }
diff --git a/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.html b/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.html
index 05b96c138..9e92235c1 100644
--- a/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.html
+++ b/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.html
@@ -5,7 +5,7 @@
   </symbol>
 </svg>
 <div class="rating">
-  @for (item of [].constructor(5); track item) {
+  @for (item of [].constructor(5); track $index) {
     <svg
       class="star"
       [class.star-active]="isStarActive($index, value)"
diff --git a/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts b/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts
index 5562d1f99..52ebab2d9 100644
--- a/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts
+++ b/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts
@@ -1,19 +1,37 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'app-rating-control',
   templateUrl: 'rating-control.component.html',
   styleUrls: ['rating-control.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RatingControlComponent,
+      multi: true,
+    },
+  ],
 })
-export class RatingControlComponent {
-  @Output()
-  readonly ratingUpdated: EventEmitter<string> = new EventEmitter<string>();
+export class RatingControlComponent implements ControlValueAccessor {
+  onChange = (_rating: string) => {};
+  onTouched = () => {};
+
+  writeValue(obj: string): void {
+    this.value = parseInt(obj);
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
 
   value: number | null = null;
 
   setRating(index: number): void {
     this.value = index + 1;
-    this.ratingUpdated.emit(`${this.value}`);
+    this.onChange(`${this.value}`);
   }
 
   isStarActive(index: number, value: number | null): boolean {