[MUSIC]
Es hora de pasar a la tercera tarea de este curso.
En esta tarea, como ya esperabas,
veremos formas angulares y observables.
Eso es lo que aprendimos en este módulo particular del curso.
En esta tarea, diseñará un formulario
dentro de la vista de componentes de detalle de plato que permitirá a
los usuarios enviar su comentario sobre un plato específico.
Utilizarás formas reactivas angulares para diseñar el formulario y
usarás los cambios de valor observables en
para iniciar la validación del formulario,
al igual que hicimos en el ejercicio que acabas de completar y
usarás un nuevo componente de material angular llamado
Angular Componente deslizante de material.
El componente deslizante se utilizará para introducir la calificación para
el plato por la persona que envía el recuento.
Veamos las tres tareas de esta tarea con un poco más de detalle.
Así que aquí, les estoy mostrando su primer plato del menú en orden
para ilustrarles las tres tareas que necesitan ser completadas en esta tarea.
Así que en esta tarea, vamos a crear un formulario en
la sección de comentarios de su componente de detalle de plato.
El formulario contiene dos campos aquí.
El campo de nombre y un campo de comentario.
En el campo nombre, el usuario introducirá el nombre del autor para el comentario.
Luego, en su campo de comentarios, que es un área de texto,
le permitirá al autor introducir el comentario que desea enviar.
Además, con el fin de obtener la calificación para el plato,
vamos a utilizar este componente de material angular llamado deslizador de material angular.
Para este componente deslizante,
se proporciona un enlace a la documentación en los recursos adicionales.
El componente deslizante es bastante sencillo de crear.
Para este componente deslizante, mostrará las marcas de graduación como esta.
Así que puedes ver que ya tienes una, dos, tres, cuatro marcas y
la quinta está justo debajo de este pulgar aquí.
Así y también cuando se muestra la vista del pulgar,
mostrará el corte en la calificación seleccionada como el.
Por lo tanto, esto tiene que ser etiquetado en diapositiva angular de componente que incluya
en su fuente y esto le permitirá seleccionar la calificación para el plato.
Por lo tanto, esta es su primera tarea en esta tarea.
Su segunda tarea es agregar validación de formularios para este formulario.
Ahora esta forma debe ser creada usando fuentes reactivas angulares y
también usando los cambios de valor observables con el fin de observar
cualquier cambio en cualquiera de estos elementos de control de forma ella.
Y siempre que ocurra cualquier cambio, debe iniciar inmediatamente la validación del formulario
usando los cambios de valor observables tal como lo hicimos en
el ejercicio que acaba de completar en la lección anterior.
Ahora, la validación que debe realizar es que tanto el nombre como
el comentario son campos obligatorios.
Además, el nombre debe contener al menos dos caracteres.
Así que si solo escribo un carácter, entonces deberías mostrar un mensaje diciendo:
Nombre del Autor debe tener al menos dos caracteres de longitud.
Ahora si, por supuesto, escribimos más, entonces eso desaparecerá.
Si elimina el nombre por completo del campo,
mostrará un mensaje que dice: Nombre del autor es obligatorio.
Por lo tanto, el mensaje requerido debe mostrarse aquí.
Así que tan pronto como escriba al menos dos caracteres,
entonces el mensaje desaparecerá.
Ahora para el campo de comentario también, este es un campo obligatorio.
Por lo tanto, debe escribir al menos unos pocos caracteres.
No hay restricción en el número de caracteres.
Pero si no se escribe ningún carácter cuando se muestra el mensaje aquí diciendo,
comente según sea necesario.
Si su formulario no es válido actualmente, entonces su botón de envío no funcionará.
Pero una vez que su formulario sea válido, entonces su botón de envío funcionará y
debería permitirle enviar la fuente.
Por lo tanto, esa es la segunda tarea en su asignación.
La tarea difícil en su tarea es que tan pronto como el formulario tenga información válida,
debe mostrar una vista previa de lo que acaba de enviar en el formulario.
Déjame escribir algo más significativo aquí, para que sean
vista previa parece interesante.
Así que verás que tan pronto como escribes información válida en tu formulario,
deberías mostrar una vista previa de cómo será el comentario
si se añade a esa lista de comentarios para el plato.
Ahora observe que en la vista previa, aún no tiene la fecha mostrada.
Por lo tanto, eso es otra cosa que debes tener en cuenta.
Si el formulario no es válido, la vista previa desaparece.
Pero tan pronto como el formulario sea válido, la vista previa volverá a aparecer.
Por lo tanto, esto es algo que debe diseñar apropiadamente usando la lista ND y
asegurándose de que el formulario sea válido antes de mostrar esta información allí.
Entonces, esa es la vista previa.
Ahora, cuando el usuario hace clic en el botón Enviar,
entonces hay algunas cosas que necesita hacer.
Cuando el usuario haga clic en el botón Enviar, entonces este comentario será
añadido a la lista de comentarios que tiene para este plato en particular.
Por lo tanto, permítanme hacer clic en el botón de enviar y se dará cuenta inmediatamente de que el formulario
ha sido agregado a la lista de comentarios para este plato en particular.
Entonces, verá que el último comentario que acabo de ingresar se ha agregado aquí.
También tenga en cuenta que la fecha de
el formulario se ha añadido en el comentario aquí.
Así que se supone que debe tomar los valores del modelo de formulario y
luego copiarlo en un modelo de datos, y luego empujar el comentario
en el rayo de objetos JavaScript de comentarios para el objeto dish.
Entonces, eso es algo que debe hacer usando el método de inserción de matriz para
matriz de objetos JavaScript.
Además, la fecha debe configurarse automáticamente y
añadirse a ese modelo de datos.
Recuerde que el modelo de formulario no contiene la fecha, sino
el modelo de datos que se deriva de la clase de comentario que hemos diseñado,
el modelo de datos contiene el autor, la calificación, el comentario y la fecha.
Por lo tanto, debe agregar la fecha en el modelo de datos.
Por lo tanto, aquí es donde hará uso de la clase de fecha Java Script
junto con convertirla a una cadena ISO
antes de almacenar en el campo de fecha de su modelo de datos de comentario.
Ahora le he proporcionado enlaces a ejemplos de cómo puede
crear fecha y cómo puede convertir la fecha en una cadena ISO
en la documentación para esta asignación,
y también en los recursos adicionales para este elemento.
Así que, por favor, busque eso para entender cómo se supone que
agregue la fecha a ese campo de comentarios allí.
Y una vez que el comentario se introduce en la matriz de comentarios,
se unirá al resto de los comentarios para ese plato en particular.
Tienes que recordar que no estamos guardando esto en el lado del servidor,
porque no tenemos un lado del servidor.
Así que si vuelves a cargar tu página, ese comentario desaparecerá.
Eso es perfectamente aceptable.
En esta etapa, no estamos tratando de guardar los cambios en
el plato de vuelta al servidor a través de nuestro servicio de plato.
Eso haremos en uno de los ciclos posteriores.
Así que en este momento, si recargas esta página, el comentario que acabas de introducir
desaparecerá, pero eso es perfectamente aceptable.
Por lo tanto, esta es la tercera tarea en su tarea.
Después de completar las tres tareas, asegúrese de que todo funcione correctamente
antes de enviar la solución de asignación a su sistema.
[MÚSICA]