api-platform / api-platform/create-client
Next.js: Form component for input type="checkbox" not working and type error
- Lenguaje dominante
- TypeScript
- Estrellas
- 376
- Forks
- 132
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
**create-client version(s) affected**: 0.10.0
**Description**
After generating an app in the pwa container derived from the standard distribution the onInvoice checkbox in the hours Form does not work and when running
```shell
docker compose exec pwa pnpm next build
```
i get the following type error:
./components/hours/Form.tsx values.onInvoice Type 'boolean | ""' is not assignable to type 'string | number | readonly string[] | undefined'.
This happens because templates/next/components/foo/Form.tsx for input type="checkbox" uses 164-165:
```javascript tsx
{{#compare type "!=" "dateTime" }}
value={values.{{name}} ?? ""}
```
At first sight is may seem strange that an input wiht type="checkbox" does not accept booleans. But if you correct the type passed to value= and test the input you will see that the checkbox never gets checked.
**How to reproduce**
Clone MetaClass' Tutorial Api Platform repository using git:
```shell
git clone https://github.com/metaclass-nl/tutorial-api-platform.git
```
check out branch chapter2-next
start the containers with
```shell
docker compose up
```
The api container should execute the data base migrations automatically. If not do:
```shell
docker compose exec php ./bin/console doctrine:migrations:migrate
```
To clear the database and execute the fixtures enter the following command:
```shell
docker compose exec php bin/console doctrine:fixtures:load
```
Follow the instructions from readme.md. or point your browser to the [same branch on github](https://github.com/metaclass-nl/tutorial-api-platform/tree/chapter2-next)
and follow the instructions.
The paragraph "Checking types" describes how to reprocude this error as well as serveral others for wich seperate issues exist/will be created.
**Possible Solution**
What helps is to replace in the generated code:
```javascript tsx
value={values.onInvoice ?? ""}
```
by
```javascript tsx
checked={values.onInvoice}
```
Then the checkbox should be checked if onInvoice is true.
I guess the template needs an other {{#compare type "=" "checkbox" }} to handle this case.
**Additional Context**
Api Platform version v3.1.3
typescript config see [pnpm-lock.yaml](https://github.com/metaclass-nl/tutorial-api-platform/blob/chapter2-next/pwa/pnpm-lock.yaml) and [tsconfig.json](https://github.com/metaclass-nl/tutorial-api-platform/blob/chapter2-next/pwa/tsconfig.json)
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.