Creando el formulario de signin

Clase 17 de 75 • Curso de MEAN 2017

Clase anteriorSiguiente clase

Alonso Alejandro Zúñiga Beltrán

student•

En la nueva versión de Material Design, las directivas de MaterialDesign empiezan con mat en vez de md

pragma medellin

student•

Si están usando Visual Studio Code, les recomiendo usar la extensión Auto Import, para que automaticamente les haga los import.

Jesus Sandrea

student•

Hay alguna para atom?

Mariano Villarreal

student•

atom-import-js

Marcelo Fontana

student•

Reactive Forms: es una filosfia mas Angular de crear formularios. Se comienza definiendo el formulario desde la clase del componente.
Pasos importantes:
1- Importar en el app.modules.ts el ReactiveFormsModule (en vez del FromsModule)
2- Importar en la clase del componente FormBuilder, FormGroup y Validators
3- Dentro del componente debemos definir también una variable que enlazará con el formulario del template y en el constructor es donde creamos los controles del formulario:

form: FormGroup; // <--- form es del tipo FormGroup

  constructor(private fb: FormBuilder) { // <--- injectamos FormBuilder
        this.form = this.fb.group({
		name: '', // <--- el FormControl llamado "name"
		//otros controles
	})
  }

Ahora en el template para que la magia suceda

<form [formGroup]="form"  (ngSubmit)="onSubmit(form.value)">
    <label>Name:
      <input type="text" formControlName="name"> // formControlName es el que enlaza con los datos definidos en la clase
    </label>
    // otros controles

    <button type="submit">Enviar</button>
	
</form>

Esto seria un pequeño resumen de como arrancar con el Reactive Forms, si lo miramos asi no hay muchos cambios en relación al template-driven form, pero cuando se torna mas complejo y queremos hacer validaciones es ahi donde vemos las ventajas de definir todo en la clase para luego vincular con el template

Luis Felipe Evilla Rodríguez

student•

Por si a alguno le pasa que al momento de oprimir el botón de submit no, el formulario no envía la información, al momento de hacer referencia a el método **onSubmit **de nuestro componente, debemos hacerlo abriendo y cerrando paréntesis

<form (ngSubmit)="onSubmit()">
    <mat-form-field>
        <textarea
            matInput
            placeholder="Answer"
            name="description"
            ngModel
        >
        </textarea>
    </mat-form-field>
    <button type="submit" mat-raised-button color="accent">Respond</button>
</form>```

Walter Lensinas

student•

Si, di vueltas en el código y encontré eso.

Gracias!

Alonso Alejandro Zúñiga Beltrán

student•

¿Cuál es la finalidad de utilizar Validators.pattern en vez de Validators.email?

Marcelo Fontana

student•

la verdad que también me genera duda???

Adrian Camilo Caminos

student•

para los que usan angular 5 😄 no hay rollo es invocarlo tal cual tener cuidado en signin-screen.component.ts y el user.model.ts de como estan declarando sus constructores

<div class="mat-container">
  <form novalidate [formGroup]="signinForm" (ngSubmit)="onSubmit()" >
    <mat-form-field>
      <input matInput placeholder="Correo electronico" formControlName="email">
    </mat-form-field>
  
    <mat-form-field>
      <input matInput placeholder="Contraseña" formControlName="password" [type]="hide ? 'password' : 'text'">
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
    </mat-form-field>
    <button type="submit" mat-raised-button color="primary">Iniciar sesión</button>
    <pre>{{signinForm.value | json}}</pre>
  </form>
</div>

Adrian Camilo Caminos

student•

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { User } from './user.model';

@Component ({
    selector: 'app-signin-screen',
    templateUrl: './signin-screen.component.html',
    styleUrls: ['./signin-screen.component.css']
})

export class SigninScreenComponent implements OnInit {
    hide = true;
    // crea un object
    signinForm: FormGroup;

    ngOnInit() {
        // formgroup le pasamos un object json
        this.signinForm = new FormGroup({
            email: new FormControl(null, [
                Validators.required,
                Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
            ]),
            password: new FormControl(null, Validators.required)
        });
    }

    onSubmit() {
        if (this.signinForm.valid) {
            const { email, password } = this.signinForm.value;
            const user = new User(email, password);
            console.log(user);
        }
    }
}

Andres Alvarez

student•

buen truco del de hide

Jordi Santamaría Portolés

student•

En la documentación oficial recomiendan usar novalidate , para evitar las validacions por defecto del navegador cuando se usa formGroup, debido a que formGroup no usa las validaciones HTML5, a diferencia de ngModule

pragma medellin

student•

En algunas versiones de angular este atributo [FormGroup]=“signinForm” falla y deben ponerla de esta forma [formGroup]=“signinForm”.

Nestor Camilo Prieto Reyes

student•

Gracias, el error solo lo pude ver hasta que detuve el comando ng serve de la terminal y volví a iniciar.

Raúl Ontiveros

student•

Gracias

Angie Katherine Paucar Cruz

student•

No sé si alguno me pueda ayudar, no puedo visualizar con console.log los datos del usuario, les comparto mi código:

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
import { User } from './user.model'

@Component ({

    selector: 'app-signin-screem',
    templateUrl: './signin-screem.component.html'

})

export class SigninScreemComponent implements OnInit {
    
    signinForm: FormGroup;

    ngOnInit(){
        this.signinForm = new FormGroup({
            email: new FormControl(null, [
                Validators.required, 
                Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
            ]),
            password: new FormControl(null, Validators.required)
        });
    }

    onSubmit() {
        if(this.signinForm.valid){
            const { email, password } = this.signinForm.value;
            const user = new User(email, password); 
            console.log(user);
        }
    }
}

export class User{
    constructor(
        public email: string,
        public password: string,
        public firstName?: string,
        public lastName?: string
    ){ }

    fullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

<form novalidate [formGroup]="signinForm" (ngSubmit)="onSubmit">

    <mat-form-field>
        <input 
            matInput 
            placeholder="Correo electrónico" 
            formControlName="email" 
            id="email"
            type="email"
            required>
        <!-- <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error> -->
    </mat-form-field>

    <mat-form-field>
        <input 
            matInput 
            placeholder="Contraseña" 
            formControlName="password"
            id="password"
            type="password"
            required>
        <!-- <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>-->
    </mat-form-field>

    <button type="submit" mat-raised-button color="accent">Iniciar Sesión</button>

</form>

Walter Lensinas

student•

Me paso lo mismo, en el archivo signin-screen.component.ts la linea donde esta el método le falta paréntesis:

Así lo tenes:
<formnovalidate [formGroup]=“signinForm” (ngSubmit)=“onSubmit”>

Así quedaría:
<formnovalidate [formGroup]=“signinForm” (ngSubmit)=“onSubmit()”>

Jesus Sandrea

student•

en la documentación de angular también hay una forma de validación

Jesus Sandrea

student•

Aqui vamos, tengo este error: SigninComponent.html:1 ERROR Error: Cannot find control with unspecified name attribute
at _throwError (forms.js:2415)
at setUpControl (forms.js:2283)
at FormControlDirective.ngOnChanges (forms.js:6448)
at checkAndUpdateDirectiveInline (core.js:12397)
at checkAndUpdateNodeInline (core.js:13928)
at checkAndUpdateNode (core.js:13871)
at debugCheckAndUpdateNode (core.js:14764)
at debugCheckDirectivesFn (core.js:14705)
at Object.eval [as updateDirectives] (SigninComponent.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14690)

//Signin.component.html
<form [formGroup]="signinForm" (ngSubmit)="onSubmit">
  <mat-form-field class="example-full-width">
   <input matInput placeholder="Email" [formControl]="email" id="email">
 </mat-form-field>
 <mat-form-field class="example-full-width">
   <input type="password" matInput placeholder="Contraseña" [formControl]="password" id="password">
  </mat-form-field>
  <button type="submit" mat-raised-button color="accent">Iniciar sesión</button>
  <button mat-raised-button color="warn">Cancelar</button>
</form>

//signin.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { User } from './user.model';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html'
})
export class SigninComponent implements OnInit {

  signinForm: FormGroup;

  ngOnInit() {
    this.signinForm = new FormGroup({
      email: new FormControl(null, [
        Validators.required,
        Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
      ]),
      password: new FormControl(null, Validators.required)
    });
  }

  onSubmit() {
    if (this.signinForm.valid) {
      const { email, password } = this.signinForm.value;
      const user = new User(email, password);
      console.log(user);
    }
  }
}

Rogelio Orona

student•

El problema esta en los inputs. Si bien la documentación de marca usar [formControl] para hacer el binding de email y password, la solución es quitar los corchetes y cambiar a formControlName en ambos casos, por lo que el código quedaría de la siguiente manera:

form [formGroup]="signinForm" (ngSubmit)="onSubmit()">
        <mat-form-field>
            <input matInput placeholder="Enter your email" formControlName="email" id="email">
        </mat-form-field>
        <mat-form-field>
            <input type="password" matInput placeholder="Enter your password" formControlName="password" id="password">
        </mat-form-field>
        <button type="submit" mat-raised-button color="accent">Sign in</button>
    </form>

Jordi Santamaría Portolés

student•

Donde se explica eso de
const {email, password } = this.signinForm.value;
en ecmascript? es la primera vez que lo veo oO, alguien tiene alguna referencia? ^^

Diego Forero

Team Platzi•

Se llama desestructuración de objetos, lo aprendes en el curso de fundamentos de JavaScript, te dejo el enlace a la documentación oficial.

Joshua Michael Rodriguez

student•

Me funciona bien. Pero, ¿a alguien más les aparece el siguiente warning en consola?

[DOM] Input elements should have autocomplete attributes (suggested: “current-password”): (More info: )
<input class="mat-input-element mat-form-field-autofill-control ng-untouched ng-pristine ng-invalid" formcontrolname="password" id="password" matinput placeholder="Contraseña" type="password" ng-reflect-name="password" ng-reflect-id="password" ng-reflect-placeholder="Contraseña" ng-reflect-type="password" aria-invalid="false" aria-required="false">

Diego Forero

Team Platzi•

Es una sugerencia para activar autocompletado en los campos y que puedas ayudar a guardar los datos en el gestor de contraseñas de los navegadores.

Sergio Toshio Minei

student•

Yo también me preguntaba lo mismo. Gracias @GOLLUM23 por responder 😃

Esteban Meza

student•

si todo es con mat

Esteban Meza

student•

Esteban Meza

student•

Rogelio Orona

student•

Para no usar un regex para la validación, se puede utilizar las validaciones con las que cuenta @angular/forms. El email quedaría de la siguiente manera:

email: new FormControl('', [Validators.required, Validators.email])

Platzi Mota

student•

Seria tan genial que Sacha fuera el profesor del Curso de Angular 4!

Rafael Antonio Hidalgo Romero

student•

al hacer submit no me funciona

export class SesionFormComponent implements OnInit {
    sesionForm: FormGroup;

    /* Conectar con los controles del formulario */
    ngOnInit() {
        this.sesionForm = new FormGroup({
            correo: new FormControl(null, [
                Validators.required,
                Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
            ]),
            clave: new FormControl(null, Validators.required)
        });
    }
    onSubmit() {
        if (this.sesionForm.valid) {
            const { correo, clave } = this.sesionForm.value;
            const  usuario = new Usuario(correo, clave);
            alert(usuario);
         }
    }
}

Alexander Marenco

student•

En el formulario hay que llamar el metodo onSubmit con parentesis

<form [FormGroup]="signinForm" (ngSubmit)="onSubmit()">```

Belén Sarrate

student•

Pregunta: Alguien sabe cómo evitar la validación de los campos hasta que no se pulse el botón enviar?

David Toca

student•

tendrías que hacer el método un submit y ahí hacer la validación casi que a mano, iteras cada field y lo veis, sería algo así:

onSubmit() {
  if (this.form.valid) {
    console.log('form submitted');
  } else {
    this.validateAllFormFields(this.form); //{7}
  }
}

Luis Felipe Cardona Florez

student•

No me quedo claro en que consisste y para que ssirve el OnInit, alguien me podria explicar porfavor ? estaria muy agradecido.

Diego Forero

Team Platzi•

OnInit es una interface, esto lo que hace es en palabras sencillas obligar a implementar los métodos definidos en esta interface para este caso se implementa el método ngOnInit() y es llamado una vez el formulario se inicializa.

Puedes ver la documentación oficial aquí

Creando el formulario de signin

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