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..14ede8d57 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,17 +13,16 @@
[formControl]="feedbackForm.controls.email"
placeholder="Email"
type="email" />
-
+
+ placeholder="Comment text">
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 fdbafddc2..82412d2dc 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
@@ -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();
}
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 629f5d084..4a458b2a6 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,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 = new EventEmitter();
+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;
+ }
}