You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aio/content/guide/dynamic-form.md
+16-14Lines changed: 16 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ Después puedes usar la plantilla para generar nuevos formularios automáticamen
7
7
8
8
La técnica es particularmente útil cuando tienes un tipo de formularios cuyo contenido debe cambiar con frecuencia para cumplir con los requisitos y cambios del negocio que están en constante evolución.
9
9
10
-
Un típico caso de uso es un questionario. Puede que necesites obtener el input de los usuarios en diferentes contextos.
10
+
Un típico caso de uso es un cuestionario. Puede que necesites obtener el input de los usuarios en diferentes contextos.
11
11
12
-
El formato y estilo de los formularios que ve un usuario deben permanecer constantes, mientras que las preguntas reales que debes preguntar varian segun el contexto.
12
+
El formato y estilo de los formularios que ve un usuario deben permanecer constantes, mientras que las preguntas reales que debes preguntar varían según el contexto.
13
13
14
-
En este tutorial construriás un formulario dinámico que representa un cuestionario básico.
14
+
En este tutorial construirás un formulario dinámico que representa un cuestionario básico.
15
15
Construirás una aplicación online para héroes en búsqueda de empleo.
16
16
La agencia está jugando constantemente con el proceso de aplicación, pero usando formularios dinámicos puedes crear nuevos formularios sobre la marcha sin cambiar el código de la aplicación.
17
17
@@ -22,7 +22,7 @@ El tutorial se desarrolla a través de los siguientes pasos.
22
22
3. Poblar el modelo con datos de muestra.
23
23
4. Desarrolla un componente para crear dinámicamente los controles del formulario.
24
24
25
-
El formulario a crear usa validaciones en los inputs y estilos para mejorar la experiencia de usuario. Tiene un botón de envío que sólo es habilitado cuando todos los inputs del usuario son validos, remarca los inputs inválidos con un color y muestra mensajes de error.
25
+
El formulario a crear usa validaciones en los inputs y estilos para mejorar la experiencia de usuario. Tiene un botón de envío que solo es habilitado cuando todos los inputs del usuario son válidos, remarca los inputs inválidos con un color y muestra mensajes de error.
26
26
27
27
La versión básica puede evolucionar para dar soporte a una variedad más rica de preguntas, una representación más elegante y una experiencia de usuario superior.
28
28
@@ -36,15 +36,15 @@ Ver el <live-example name="dynamic-form"></live-example>.
36
36
37
37
Antes de comenzar con este tutorial, deberías tener conocimiento básico de lo siguiente:
38
38
39
-
- Programación con [TypeScript](https://www.typescriptlang.org/docs/home.html"El lenguaje typescript") y HTML5.
39
+
- Programación con [TypeScript](https://www.typescriptlang.org/docs/home.html"El lenguaje TypeScript") y HTML5.
40
40
41
41
- Conceptos fundamentales de [diseño de aplicaciones con Angular](guide/architecture"Introducción a los conceptos de Angular").
42
42
43
43
- Conocimiento básico de [formularios reactivos](guide/reactive-forms"Guía de formularios reactivos").
44
44
45
45
## Activar formularios reactivos para tu proyecto
46
46
47
-
Los formualios dinámicos están basados en formularios reactivos. Para que la aplicación tenga acceso a las directivas de los formularios reactivos, el [módulo raíz](guide/bootstrapping"Aprende sobre bootstrapping una aplicación desde el módulo raíz.") importa `ReactiveFormsModule` desde la libreria`@angular/forms`.
47
+
Los formularios dinámicos están basados en formularios reactivos. Para que la aplicación tenga acceso a las directivas de los formularios reactivos, el [módulo raíz](guide/bootstrapping"Aprende sobre bootstrapping una aplicación desde el módulo raíz.") importa `ReactiveFormsModule` desde la librería`@angular/forms`.
48
48
49
49
El siguiente código de ejemplo muestra la configuración del módulo raíz.
50
50
@@ -71,6 +71,7 @@ El modelo de datos para este tipo de formulario debe representar una pregunta.
71
71
El ejemplo incluye el `DynamicFormQuestionComponent`, el cual define una pregunta como el objeto fundamental en el modelo.
72
72
73
73
El siguiente `QuestionBase` es una clase base para un conjunto de controles que pueden representar la pregunta y su respuesta en el formulario.
@@ -106,7 +108,7 @@ Cada pregunta es representada en la plantilla del componente del formulario medi
106
108
107
109
El `DynamicFormQuestionComponent` es responsable de renderizar los detalles de una pregunta individual con base en los datos del objeto asociados a la pregunta.
108
110
El formulario utiliza una [directiva `[formGroup]`](api/forms/FormGroupDirective"referencia a la API") para conectar la plantilla HTML a los objetos de control subyacentes.
109
-
El `DynamicFormQuestionComponent` crea gurpos de formularios y los completa con controles definidos en el modelo de preguntas, especificando reglas de visualización y validación.
111
+
El `DynamicFormQuestionComponent` crea grupos de formularios y los completa con controles definidos en el modelo de preguntas, especificando reglas de visualización y validación.
110
112
111
113
<code-tabs>
112
114
@@ -121,7 +123,7 @@ El `DynamicFormQuestionComponent` crea gurpos de formularios y los completa con
121
123
</code-tabs>
122
124
123
125
El objetivo del `DynamicFormQuestionComponent` es presentar tipos de preguntas definidas en tu modelo.
124
-
Sólo tienes dos tipos de preguntas hasta este punto pero puedes imaginar muchas más.
126
+
Solo tienes dos tipos de preguntas hasta este punto, pero puedes imaginar muchas más.
125
127
La declaración `ngSwitch` en la plantilla determina qué tipo de pregunta mostrar.
126
128
El switch utiliza las directivas con los selectores [`formControlName`](api/forms/FormControlName"referencia a la API de la directiva FormControlName") y [`formGroup`](api/forms/FormGroupDirective"reerencia a la API de la directiva FormGroupDirective"). Ambas directivas son definidas en el módulo `ReactiveFormsModule`.
127
129
@@ -133,7 +135,7 @@ Se necesita de otro servicio para suministrar un conjunto específico de pregunt
133
135
Para este ejercicio crearás un servicio llamado `QuestionService` para proporcionar un array de preguntas a partir de los datos de muestra codificados de forma rígida.
134
136
En una aplicación del mundo real, el servicio debe traer los datos desde un backend.
135
137
El punto clave, sin embargo, es que tú controlas las preguntas de la solicitud de empleo del héroe por completo a través de los objetos devueltos por `QuestionService`.
136
-
Para mantener el questionario a medida que cambian los requisitos, solo necesitas agregar, actualizar y eliminar objetos desde el array de `questions`.
138
+
Para mantener el cuestionario a medida que cambian los requisitos, solo necesitas agregar, actualizar y eliminar objetos desde el array de `questions`.
137
139
138
140
El `QuestionService` proporciona un conjunto de preguntas en forma de un array vinculado a las preguntas de `@Input()`
139
141
@@ -145,7 +147,7 @@ El `QuestionService` proporciona un conjunto de preguntas en forma de un array v
145
147
146
148
## Crea una plantilla para el formulario dinámico
147
149
148
-
El componente `DynamicFormComponent` es el punto de entrada y el contenedor principal para el fórmulario, el cual es representado con la etiqueta `<app-dynamic-form>`.
150
+
El componente `DynamicFormComponent` es el punto de entrada y el contenedor principal para el formulario, el cual es representado con la etiqueta `<app-dynamic-form>`.
149
151
150
152
El componente `DynamicFormComponent` presenta una lista de preguntas vinculada cada una a un elemento `<app-question>` que coincide con el componente `DynamicFormQuestionComponent`.
151
153
@@ -163,21 +165,21 @@ El componente `DynamicFormComponent` presenta una lista de preguntas vinculada c
163
165
164
166
### Visualizar el formulario
165
167
166
-
Para visualizar una instancia del fórmulario dinámico, la plantilla del `AppComponent` pasa el array de `questions` retornado por el servicio `QuestionService` al componente contenedor del formulario, `<app-dynamic-form>`.
168
+
Para visualizar una instancia del formulario dinámico, la plantilla del `AppComponent` pasa el array de `questions` retornado por el servicio `QuestionService` al componente contenedor del formulario, `<app-dynamic-form>`.
El ejemplo proporciona un modelo para una solicitud de empleo para héroes, pero no hay referencias a ningúna pregunta específica de algún héroe que no sean los objetos devueltos por `QuestionService`.
174
+
El ejemplo proporciona un modelo para una solicitud de empleo para héroes, pero no hay referencias a ninguna pregunta específica de algún héroe que no sean los objetos devueltos por `QuestionService`.
173
175
Esta separación de datos y modelos te permite reutilizar los componentes para cualquier tipo de encuesta siempre y cuando sea compatible con el objeto modelo _question_.
174
176
175
177
### Asegurando datos válidos
176
178
177
179
La plantilla del formulario utiliza el enlace de datos dinámicos de metadatos para renderizar el formulario sin hacer suposiciones con datos en duro sobre preguntas específicas.
178
180
Agrega tanto metadatos de control como criterios de validación de forma dinámica.
179
181
180
-
Para asegurar que los inputs sean válidos, el botón de _Save_ está deshabilitado hasta que el formulario esté en un estado válido. Cuando el formulario es valido, puedes dar click en _Save_ y la aplicación renderizará los actuales valores del formulario en formato JSON.
182
+
Para asegurar que los inputs sean válidos, el botón de _Save_ está deshabilitado hasta que el formulario esté en un estado válido. Cuando el formulario es válido, puedes dar click en _Save_ y la aplicación renderizará los actuales valores del formulario en formato JSON.
181
183
182
184
La siguiente imagen muestra el formulario final.
183
185
@@ -188,7 +190,7 @@ La siguiente imagen muestra el formulario final.
188
190
## Pasos siguientes
189
191
190
192
-**Diferentes tipos de formularios y colecciones de controles**
191
-
Este tutorial muestra como construir un cuestionario, el cual es sólo un tipo de formulario dinámico.
193
+
Este tutorial muestra como construir un cuestionario, el cual es solo un tipo de formulario dinámico.
192
194
Para un ejemplo de un formulario dinámico diferente, ve la sección [Crear formularios dinámicos](guide/reactive-forms#creating-dynamic-forms"Crear formularios dinámicos con arrays") en la guía de formularios reactivos.
193
195
El ejemplo también muestra como usar `FormArray` en lugar de `FormGroup` para recopilar un conjunto de controles.
0 commit comments