feat(Answer 41): control value accessor

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" />
   <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>

apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.ts

@@ -27,16 +27,16 @@ export class FeedbackFormComponent {
       validators: Validators.required,
     }),
     comment: new FormControl(),
+    rating: new FormControl('', {
+      validators: Validators.required,
+    }),
   });
 
   rating: string | null = null;
 
   submitForm(): void {
-    this.feedBackSubmit.emit({
-      ...this.feedbackForm.value,
-      rating: this.rating,
-    });
-
+    console.log(this.feedbackForm.value);
+    this.feedBackSubmit.emit(this.feedbackForm.value);
     this.feedbackForm.reset();
   }
 }

apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.html

@@ -4,7 +4,7 @@
       d="M31.77 11.857H19.74L15.99.5l-3.782 11.357H0l9.885 6.903-3.692 11.21 9.736-7.05 9.796 6.962-3.722-11.18 9.766-6.845z" />
   </symbol>
 </svg>
-<div class="rating">
+<div class="rating" >
   @for (item of [].constructor(5); track item) {
     <svg
       class="star"

apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts

@@ -1,23 +1,58 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   standalone: true,
   selector: 'app-rating-control',
   templateUrl: 'rating-control.component.html',
   styleUrls: ['rating-control.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: RatingControlComponent,
+    },
+  ],
 })
-export class RatingControlComponent {
-  @Output()
-  readonly ratingUpdated: EventEmitter<string> = new EventEmitter<string>();
-
-  value: number | null = null;
+export class RatingControlComponent implements ControlValueAccessor {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange = (rating: number) => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onTouched = () => {};
+  isDisabled = false;
+  touched = false;
+  value: number | null = 0;
 
   setRating(index: number): void {
+    this.markAsTouched();
     this.value = index + 1;
-    this.ratingUpdated.emit(`${this.value}`);
+    this.onChange(this.value);
+  }
+
+  isStarActive(index: number, rating: number | null): boolean {
+    return rating ? index < rating : false;
+  }
+
+  writeValue(rating: any): void {
+    this.value = rating;
+  }
+
+  registerOnChange(onChange: any) {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouched: any) {
+    this.onTouched = onTouched;
+  }
+
+  markAsTouched() {
+    if (!this.touched) {
+      this.onTouched();
+      this.touched = true;
+    }
   }
 
-  isStarActive(index: number, value: number | null): boolean {
-    return value ? index < value : false;
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
   }
 }