diff --git a/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md b/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md new file mode 100644 index 0000000..7c97df1 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md @@ -0,0 +1,41 @@ +--- +title: 🟠 Control Value Accessor +description: Desafio 41 é sobre criar um controle personalizado de formulário que implemente a interface Control Value Accessor. +author: stanislav-gavrilov +challengeNumber: 41 +command: forms-control-value-accessor +sidebar: + order: 1 +--- + +## Informação + +Neste desafio, o objetivo é criar um campo personalizado de formulário que use a Form API do Angular `ControlValueAccessor`. Você pode achar a documentação [aqui](https://angular.io/api/forms/ControlValueAccessor). A interface é crucial para criar controles personalizados de formulário que interaja de forma transparente com a API dos formulários do Angular. + +## Declaração + +O objetivo principal é usar controle no `feedbackForm` para eliminar a necessidade de uso do `@Output` afim de recuperar o valor e injetar ele no `FormGroup`. +Além disso, você é obrigado a integrar validação para o novo controle afim de assegurar que os dados de avaliação existam. (O botão de submissão do formulário deve ser desabilitado se o formulário é inválido). + +Atualmente, a avaliação é programada desta maneira: + +```html + +``` + +```ts +rating: string | null = null; + +onFormSubmit(): void { + this.feedBackSubmit.emit({ + ...this.feedbackForm.value, + rating: this.rating, // fora do FormGroup e sem validação + }); +} +``` + +O objetivo é incluir a avaliação no `FormGroup` + +```html + +```