feat: anade app playground con catalogo de componentes
This commit is contained in:
@@ -33,7 +33,8 @@ no cubren.
|
||||
## Formularios: Signal Forms
|
||||
|
||||
Los campos ya no son `ControlValueAccessor` ni reciben `formControlName`.
|
||||
Implementan los contratos de Signal Forms, así que basta con enlazar `[field]`:
|
||||
Implementan los contratos de Signal Forms, así que basta con enlazar
|
||||
`[formField]` — ése es el selector de la directiva `FormField`, no `[field]`:
|
||||
|
||||
```ts
|
||||
import { form, required, min, FormField } from '@angular/forms/signals';
|
||||
@@ -41,9 +42,9 @@ import { form, required, min, FormField } from '@angular/forms/signals';
|
||||
@Component({
|
||||
imports: [FormField, PiTextFieldComponent, PiNumberFieldComponent, PiSlideToggleComponent],
|
||||
template: `
|
||||
<pi-text-field [field]="f.name" placeholder="Nombre" />
|
||||
<pi-number-field [field]="f.age" />
|
||||
<pi-slide-toggle [field]="f.active" />
|
||||
<pi-text-field [formField]="f.name" placeholder="Nombre" />
|
||||
<pi-number-field [formField]="f.age" />
|
||||
<pi-slide-toggle [formField]="f.active" />
|
||||
`,
|
||||
})
|
||||
export class Ejemplo {
|
||||
@@ -57,7 +58,12 @@ export class Ejemplo {
|
||||
```
|
||||
|
||||
La directiva `FormField` sincroniza sola `value`, `disabled`, `errors`,
|
||||
`touched`, `required`, `min`/`max`, `maxLength`… con el campo enlazado.
|
||||
`touched`, `required`, `min`/`max`, `maxLength`… con el campo enlazado. De
|
||||
hecho **no se pueden enlazar a mano** esas entradas en un elemento que ya use
|
||||
`[formField]`: Angular lo rechaza con `NG8022`. Los validadores van en el
|
||||
`form()`, no en la plantilla.
|
||||
|
||||
Se puede ver funcionando en la app `playground` (`nx serve playground`).
|
||||
|
||||
| Componente | Contrato | Tipo del valor |
|
||||
| ---------------------------------------------------- | --------------------- | ------------------------------------- |
|
||||
@@ -93,6 +99,11 @@ Detalles a tener en cuenta:
|
||||
Los selects (`ui/select`) siguen con `ControlValueAccessor`; quedaron fuera del
|
||||
alcance de esta migración.
|
||||
|
||||
**El loader de servidor de traducciones ya no está en el barrel.**
|
||||
`util/translate/loaders/translate-server.loader` usa `fs`, `path` y `process`;
|
||||
exportarlo desde `@pi/ui` rompía el bundle de navegador de cualquier app que
|
||||
importase la librería. Se importa por su ruta directa desde el arranque de SSR.
|
||||
|
||||
## Decisiones que cambian comportamiento
|
||||
|
||||
Revisar estos puntos antes de usar la librería en producción:
|
||||
|
||||
Reference in New Issue
Block a user