Challenge 56 multi step reactive form and signals (#1030)

feat: challenge 55 form and signal
This commit is contained in:
Laforge Thomas
2024-07-08 17:11:41 +02:00
committed by GitHub
parent 45353aa55a
commit ddb5036af0
26 changed files with 505 additions and 17 deletions

View File

@@ -0,0 +1,28 @@
---
title: 🔴 forms and signal
description: Challenge 56 is about working with reactive forms and signals
author: thomas-laforge
contributors:
- tomalaforge
challengeNumber: 56
command: signal-forms-and-signal
sidebar:
order: 211
badge: New
---
## Information
We are working within a large e-commerce codebase that utilizes a substantial number of forms. The team predominantly uses reactive forms, and since the release of signals, we have been integrating them extensively.
The current feature in development is a multi-step form process. The steps include: selecting a product, choosing the quantity, and finally proceeding to the checkout step to complete the billing details. However, an issue has been identified: when a user navigates back from the checkout step to the quantity step, the previously selected quantity is not retained. This needs to be fixed.
## Challenge Statement
The objective of this challenge is to make sure that the selected quantity is preserved when navigating back from the checkout step to the quantity step.
## Constraints
The solution must use reactive forms and signals.
Additionally, as an optional side challenge, you may refactor the code to use template-driven forms.

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir al Desafío más reciente
link: /es/challenges/angular/55-back-button-navigation/
link: /es/challenges/signal/56-forms-and-signal/
icon: rocket
- text: Dar una estrella
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="55 Desafíos">
Este repositorio contiene 55 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
<Card title="56 Desafíos">
Este repositorio contiene 56 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
</Card>

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Aller au dernier Challenge
link: /fr/challenges/angular/55-back-button-navigation/
link: /fr/challenges/signal/56-forms-and-signal/
icon: rocket
- text: Donne une étoile
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="55 Défis">
Ce répertoire rassemble 55 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
<Card title="56 Défis">
Ce répertoire rassemble 56 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
</Card>
<Card title="Subscribe to get notify of latest challenges">

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Go to the latest Challenge
link: /challenges/angular/55-back-button-navigation/
link: /challenges/signal/56-forms-and-signal/
icon: rocket
- text: Give a star
link: https://github.com/tomalaforge/angular-challenges
@@ -27,8 +27,8 @@ import MyIcon from '../../components/MyIcon.astro';
import SubscriptionForm from '../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="53 Challenges">
This repository gathers 53 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
<Card title="56 Challenges">
This repository gathers 56 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>

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir para o desafio mais recente
link: /pt/challenges/angular/55-back-button-navigation/
link: /pt/challenges/signal/56-forms-and-signal/
icon: rocket
- text: Dar uma estrela
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="55 Desafios">
Este repositório possui 55 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
<Card title="56 Desafios">
Este repositório possui 56 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
<b>Ngrx</b> e <b>Typescript</b>.
Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
melhorar suas habilidades.

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Перейти к последней задаче
link: /ru/challenges/angular/55-back-button-navigation/
link: /ru/challenges/signal/56-forms-and-signal/
icon: rocket
- text: Добавить звезду
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
<CardGrid>
<Card title="54 испытаний">
Этот репозиторий содержит 54 испытаний, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> и <b>Typescript</b>.
<Card title="56 испытаний">
Этот репозиторий содержит 56 испытаний, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> и <b>Typescript</b>.
Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.
</Card>