Agregando un formulario para respuestas

Clase 12 de 75 • Curso de MEAN 2017

Clase anteriorSiguiente clase

Roberto Ocando Morales

student•

Hola, tambien podríamos usar el comando del angular cli desde la consola:

** ng generate component answer.**

Excelente curso Sacha.

Fernando Ontiveros

student•

En realidad para crearlo dentro de la carpeta “app” sería: ng g component answer --module app

Sergio Toshio Minei

student•

Formularios en Angular

Para usar formularios en Angular, va a usar @angular/forms.

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html'
})

export class AnswerFormComponent {
  onSubmit(form: NgForm) {
    console.log(form.value.description);
  }
}

En el html, se debe indicar que cuando se haga submit al formulario, se llame a la función onSubmit. Esto se hace poniendo (ngSubmit)="onSubmit(f)" #f="ngForm" en el <form>.

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <mat-form-field>
    <textarea matInput placeholder="Respuesta" name="description" ngModel></textarea>
  </mat-form-field>
  <button type="submit" mat-raised-button color="accent">Responder</button>
</form>

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Carolina Araya

student•

Genial!! Gracias!

Sergio Toshio Minei

student•

gracias @carolina-araya

Jesus Sandrea

student•

Quisiera saber para que sirve el método OnInit en angular, me da curiosidad porque aparece cada vez que creo un componente desde la terminal…

Gracias

Irving Sarmiento

student•

Indica que cada vez que se inicie el componente, se ejecutará algo que tengas dentro de él.

Quimey Lucas Marquez

student•

En realidad es el metodo que se ejecuta cuando el componente ya esta cargado, cuando angular lo cargo se ejecuta el ngOnInit

Walter Lensinas

student•

Buenas tardes, agrego el código de la clase:

Agustin David Luzenti

student•

Hola! El codigo me compila de manera correcta, pero el navegador desde la consola tengo el siguiente error:
1- [WDS] Disconnected!
2- Error: Unexpected value ‘undefined’ declared by the module ‘AppModule’.

Isar Ramses Cadena Gaona

student•

Sobre 2- Error: Unexpected value ‘undefined’ declared by the module ‘AppModule’.
A mi me aparecía porque en answer-form.component.ts tenia:

export class AnswerFormComponent {

Mientras que en app.module.ts lo importé como

import { AsnswerFormComponent } from './answer/answer-form.component';

Si te das cuenta al importarlo le estaba dando un nombre diferente (y erróneo) al componente, es AnswerFormComponent y no AsnswerFormComponent.

Carlos Enrique Ramírez Flores

student•

generamos todo los archivos del componente

ng g c answer --module app```

Carolina Araya

student•

En Angular 6 aún se construyen de esa manera los forms??

Carolina Araya

student•

En Angular 6 aún se construyen de esa manera los forms??

Maycol Uribe Romero

student•

Esta es otra forma:

<form>
  <mat-form-field>
    <textarea
      matInput
      placeholder="Respuesta"
      name="description"
      #textA
      >
    </textarea>
  </mat-form-field>
  <button type="submit" mat-raised-button color="accent" (click)="onSubmit(textA.value)">Responder</button>
</form>

y el ts:

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html',
  styleUrls: ['./answer-form.component.css']
})
export class AnswerFormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onSubmit(textArea: string) {
    event.preventDefault();
    console.log(textArea);
  }

}

Carolina Araya

student•

Me estaba dando un montón de problemas la manera en que lo hizo el tutor… No sé si será porque estoy utilizando Angular 6 y el curso no lo han actualizado. Pero tu solución me funcionó. Gracias!

Carlos Alberto García Rosales

student•

porque en console punto log es textArea, no seria textA?

Alexander Valencia

student•

Forms

Jesus Eduardo Cruz Valdez

student•

Un componente puede tener un componente anidado en si.

Los componentes son los bloques con los que se construye una aplicación.

Carlos Enrique Ramírez Flores

student•

no olviden importar en material.module.ts los MatInputModule,MatButtonModule para que funcione el boton y el textearea

import {NgModule} from '@angular/core';
import {MatToolbarModule, MatIconModule,MatCardModule,MatInputModule,MatButtonModule} from '@angular/material';

const modules = [
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatButtonModule
];
@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule{}

Jesus Eduardo Cruz Valdez

student•

Ok, como hiciste para bajar un poco mas el icono de C#.

Saludos

wesly hernandez

student•

ahora tengo un nuevo problema es que todo el contenido que tenia en el navegador ya no se ve, esta todo en blanco. pero en la consola no me sale ningún error.

Diego Forero

Team Platzi•

En la terminal donde corres el server tampoco sale ningún error?

wesly hernandez

student•

no, la terminal me preceda como que la aplicación esta funcionado perfectamente. no me marca ningún error. en verdad no se que pasa.

Yonathan Gutierrez

student•

En las ultimas versiones ya no es Md… sino Mat…

wesly hernandez

student•

estoy teniendo problema cuando importe el modulo "MdButtonModule"
me sale este error en la consola.
=> ERROR in src/app/material.module.ts(5,10): error TS2305: Module ‘“C:/Users/z0di4ckx/Documents/MEAN_curso/platzi-overflow/node_modules/@angular/material/material”’ has no exported member ‘MdButtonModule’.
src/app/material.module.ts(6,10): error TS2305: Module ‘“C:/Users/z0di4ckx/Documents/MEAN_curso/platzi-overflow/node_modules/@angular/material/material”’ has no exported member ‘MdInputModule’.

porque me sale ese error si importe todo como es;

wesly hernandez

student•

si fue que hice los importe.
y los modulos (MdButtonModule y MdInputModule) me lanzan un error. ah que se debe esto?

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material';
import { MdButtonModule } from '@angular/material';
import { MdInputModule } from '@angular/material';

const modules = [
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MdButtonModule,
  MdInputModule
];

@NgModule({
  imports: modules,
  exports: modules
})
export class MaterialModules {}```

José Efraín García López

student•

Bueno segun pude notar en
el import para el boton esta de esta manera
import {MatButtonModule} from ‘@angular/material/button’;

Y tu lo tienes como
import { MdButtonModule } from ‘@angular/material’;

Creo que ahí puede estar el problema, ya que a mi me lo muestra de la forma correcta. De igual forma con el inputModule:

import {MatInputModule} from ‘@angular/material/input’;

Sergio Zapata Donado

student•

Para los que tengan el error "Error: mat-form-field must contain a MatFormFieldControl"
Deben agregar en el app.module.ts lo siguiente:

import {MatInputModule} from '@angular/material';
@NgModule({
  imports: [
  ...
    MatInputModule
  ...
]

Quimey Lucas Marquez

student•

cuando hago el form.value.nombreDelInput con un radio button no me trae ningun valor, se queda en undefined, alguien sabe porqué?

Quimey Lucas Marquez

student•

Va, en realidad cuando lo hago con cualquier cosa, no me trae ningún valor

Heiler Joel Finol Valbuena

student•

Alguien me podria explicar, porque al colocar la etiqueta:

<app-answer-form>

Me sale este error:

Uncaught Error: Template parse errors:
'app-answer-form' is not a known element:
1. If 'app-answer-form' is an Angular component, then verify that it is part of this module.
2. If 'app-answer-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </li>
  </ul>
  [ERROR ->]<app-answer-form>

  </app-answer-form>

Diego Forero

Team Platzi•

Porque no has creado el componente para que pueda ser importado, sigue con atención este video y puedes crear el componente para ser usado.

Victor Hugo Roman Ruiz

student•

Cuando hago clic en el botón, en la consola me aparece undefined

aquí el código del componente:

export class AnswerFormComponent { onSubmit(form: NgForm) { console.log(form.value.description); } }

y el html

<form (ngSubmit)="onSubmit(f);" #f="ngForm"> <mat-form-field> <textarea matInput placeholder="Respuesta" name="description" ngModel> </textarea> </mat-form-field> <button mat-raised-button color="primary" type="submit">Responder</button> </form>

Fabiana Accinelli

student•

esta linea me tira error en consola

<form (ngSubmit)=“onSubmit(f)” #f=“ngForm”>```

por otro lado quiero comentar que md- en los materiales yo tengo que usar mat-
por lo tanto el form que uso es
<mat-form-field> en ves de <md-input-container>
pero tengo problema con esa linea …
y este es el error que me tira la consola

There is no directive with “exportAs” set to “ngForm” ("<form (ngSubmit)=“onSubmit(f)” [ERROR ->]#f=“ngForm”>
<mat-form-field>

<textarea matInput placeholder=“Respuesta” name=“description” ngM")

José Ignacio Miranda

student•

En app.module.ts importa ** FormsModule**

import { FormsModule } from ‘@angular/forms’;

y pasalo en el @NgModule

@NgModule({
declarations: [
…
],
imports: [
…
FormsModule <-- 😄
],
providers: [],
bootstrap: [AppComponent]
})

Fabiana Accinelli

student•

muchas gracias …Ahora funciona perfecto … se ve que se me paso agregar ese module …
muchas gracias !!!

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html'
})

export class AnswerFormComponent {
  onSubmit(form: NgForm) {
    console.log(form.value.description);
  }
}

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <mat-form-field>
    <textarea matInput placeholder="Respuesta" name="description" ngModel></textarea>
  </mat-form-field>
  <button type="submit" mat-raised-button color="accent">Responder</button>
</form>

<form>
  <mat-form-field>
    <textarea
      matInput
      placeholder="Respuesta"
      name="description"
      #textA
      >
    </textarea>
  </mat-form-field>
  <button type="submit" mat-raised-button color="accent" (click)="onSubmit(textA.value)">Responder</button>
</form>

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html',
  styleUrls: ['./answer-form.component.css']
})
export class AnswerFormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onSubmit(textArea: string) {
    event.preventDefault();
    console.log(textArea);
  }

}

import {NgModule} from '@angular/core';
import {MatToolbarModule, MatIconModule,MatCardModule,MatInputModule,MatButtonModule} from '@angular/material';

const modules = [
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatButtonModule
];
@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule{}

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material';
import { MdButtonModule } from '@angular/material';
import { MdInputModule } from '@angular/material';

const modules = [
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MdButtonModule,
  MdInputModule
];

@NgModule({
  imports: modules,
  exports: modules
})
export class MaterialModules {}```

Uncaught Error: Template parse errors:
'app-answer-form' is not a known element:
1. If 'app-answer-form' is an Angular component, then verify that it is part of this module.
2. If 'app-answer-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </li>
  </ul>
  [ERROR ->]<app-answer-form>

  </app-answer-form>

Agregando un formulario para respuestas

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más