Merge pull request #396 from stillst/forms-control-value-accessor

feat: challenge 40 - forms control value accessor

docs/src/content/authors/stanislav-gavrilov.json

@@ -0,0 +1,5 @@
+{
+  "name": "Stanislav Gavrilov",
+  "linkedin": "https://www.linkedin.com/in/stgavrilov/",
+  "github": "https://github.com/stillst"
+}

docs/src/content/docs/challenges/forms/41-control-value-accessor.md

@@ -0,0 +1,42 @@
+---
+title: 🟠 Control Value Accessor
+description: Challenge 41 is about creating a custom form control that implements Control Value Accessor interface.
+author: stanislav-gavrilov
+challengeNumber: 41
+command: forms-control-value-accessor
+sidebar:
+  order: 119
+  badge: New
+---
+
+## Information
+
+In this challenge, the goal is to create a custom form field that is using the Form API of Angular `ControlValueAccessor`. You can find the documentation [here](https://angular.io/api/forms/ControlValueAccessor). This interface is crucial for creating custom form controls that can interact seamlessly with Angular's forms API.
+
+## Statement
+
+The primary goal is to use control in the `feedbackForm` to eliminate the need for using `@Output` to retrieve the value and inject it into the `FormGroup`.
+Additionally, you are required to integrate validation for the new control to ensure that rating data exist. (The form submission button should be disabled if the form is invalid).
+
+Currently, rating is coded this way:
+
+```html
+<app-rating-control (ratingUpdated)="rating = $event"> </app-rating-control>
+```
+
+```ts
+rating: string | null = null;
+
+onFormSubmit(): void {
+  this.feedBackSubmit.emit({
+    ...this.feedbackForm.value,
+    rating: this.rating, // not inside the FormGroup and no validation
+  });
+}
+```
+
+The goal is to include rating into the `FormGroup`
+
+```html
+<app-rating-control [formControl]="feedbackForm.controls.rating"> </app-rating-control>
+```

docs/src/content/docs/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Go to the latest Challenge
-      link: /challenges/performance/40-christmas-web-worker/
+      link: /challenges/forms/41-control-value-accessor/
       icon: rocket
     - text: Give a star
       link: https://github.com/tomalaforge/angular-challenges
@@ -25,8 +25,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../components/MyIcon.astro';
 
 <CardGrid>
-<Card title="40 Challenges">
-    This repository gathers 40 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
+<Card title="41 Challenges">
+    This repository gathers 41 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>