mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-13 14:23:02 -05:00
docs: fix docs for review
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
# Control Value Accessor
|
# Control Value Accessor
|
||||||
|
|
||||||
> author: thomas-laforge
|
> author: stanislav-gavrilov
|
||||||
|
|
||||||
### Run Application
|
### Run Application
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx nx serve performance-control-value-accessor
|
npx nx serve forms-control-value-accessor
|
||||||
```
|
```
|
||||||
|
|
||||||
### Documentation and Instruction
|
### Documentation and Instruction
|
||||||
|
|||||||
@@ -9,12 +9,34 @@ sidebar:
|
|||||||
badge: New
|
badge: New
|
||||||
---
|
---
|
||||||
|
|
||||||
:::note
|
|
||||||
WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don’t understand a certain part, please feel free to reach out or create an issue.
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Information
|
## Information
|
||||||
|
|
||||||
In this exercise, you have to rewrite FeedbackControlComponent. It should implement Control Value Accessor interface.
|
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.
|
||||||
This interface is crucial for creating custom form controls that can interact seamlessly with Angular's forms API.
|
|
||||||
The primary goal is to use control in the feedbackForm to eliminate the need for using @Output to retrieve the value and check it.
|
## 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>
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user