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; + } }