Answer:41

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

@@ -13,17 +13,16 @@
     [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"
-    placeholder="Сomment text"></textarea>
+    placeholder="Comment text"></textarea>
   <button
     class="feedback-form-submit"
     type="submit"
-    [disabled]="
-      !feedbackForm.touched || rating === null || feedbackForm.invalid
-    ">
+    [disabled]="!feedbackForm.touched || feedbackForm.invalid">
     Submit
   </button>
 </form>

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

@@ -25,16 +25,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();
   }

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

@@ -1,22 +1,58 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, forwardRef } 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.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => RatingControlComponent),
+    },
+  ],
 })
-export class RatingControlComponent {
-  @Output()
-  readonly ratingUpdated: EventEmitter<string> = new EventEmitter<string>();
+export class RatingControlComponent implements ControlValueAccessor {
+  protected value: number | null = null;
+  protected disabled = false;
 
-  value: number | null = null;
+  private onChange!: (value: string) => void;
+  private onTouched!: () => void;
 
   setRating(index: number): void {
+    if (this.disabled) {
+      return;
+    }
+
     this.value = index + 1;
-    this.ratingUpdated.emit(`${this.value}`);
+
+    if (this.onTouched && typeof this.onTouched === 'function') {
+      this.onTouched();
+    }
+
+    if (this.onChange && typeof this.onChange === 'function') {
+      this.onChange(`${this.value}`);
+    }
   }
 
   isStarActive(index: number, value: number | null): boolean {
     return value ? index < value : false;
   }
+
+  writeValue(value: number | null): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
 }