Dando estilo al formulario de signin

Clase 18 de 75 • Curso de MEAN 2017

Isar Ramses Cadena Gaona

student•

Cuando las contraseñas no coinciden en lugar de imprimir en consola los datos, muestra el mensaje ‘Las contraseñas no coinciden’ y deja en blanco los campos de las contraseñas

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

@Component ({
  selector: 'app-singup-screen',
  templateUrl: './singup-screen.component.html'
})
export class SingupScreenComponent implements OnInit {
  singupForm: FormGroup;
  ngOnInit() {
    this.singupForm = new FormGroup({
      firstName: new FormControl(null, Validators.required),
      lastName: new FormControl(null, Validators.required),
      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),
      password2: new FormControl(null, Validators.required)
    });
  }
  onSubmit() {
    const { firstName, lastName, email, password, password2 } = this.singupForm.value;
    if (this.singupForm.valid && password === password2) {
      const user = new User(email, password, firstName, lastName);
      console.log(user);
    }
  }
}

 <form [formGroup]="singupForm" (ngSubmit)="onSubmit()">
  <mat-input-container>
    <input matInput placeholder="Nombre" formControlName="firstName" id="firstName">
  </mat-input-container>
  <mat-input-container>
    <input matInput placeholder="Apellido" formControlName="lastName" id="lastName">
  </mat-input-container>
  <mat-input-container>
    <input matInput placeholder="Correo electrónico" formControlName="email" id="email">
  </mat-input-container>
  <mat-input-container>
    <input type="password" matInput placeholder="Contraseña" formControlName="password" id="password">
  </mat-input-container>
  <mat-input-container>
    <input type="password" matInput placeholder="Repita la contraseña" formControlName="password2" id="password2">
  </mat-input-container>
  <button type="submit" mat-raised-button color="accent" onclick="if (password.value !== password2.value){alert('Las contraseñas no coinciden'); password.value=''; password2.value=''; }">Crear cuenta</button>
</form>

Eduardo Ignacio Denis

student•

Si quieren realizar el form.reset() y las validaciones de error se disparan cuando se resetean los inputs, les recomiento mirar el siguiente link

Eduardo Ignacio Denis

student•

Mi solución

Alexander Flores

student•

aqui les dejo el link de como yo lo solucione, creo que sera muy parecidoa los demas

Pepe Alvarez

student•

Una practica que tome aparte de la propuesta por Sacha y gracias a sus aportes fue agregar la validación de confirmar el password, pero considero que es mejor agregarlo como una custom validation, en lugar de validar si los password coinciden en el evento onSubmit(), y aquí mi resultado.

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


@Component({
    selector: 'app-signup-screen',
    templateUrl: './signup-screen.components.html'
})
export class SignupScreenComponent implements OnInit {
    signupForm: FormGroup;
    ngOnInit() {
        this.signupForm = new FormGroup({
            firstName: new FormControl(null, Validators.required),
            lastName: new FormControl(null, Validators.required),
            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),
            passwordConfirmation: new FormControl( null, [
                Validators.required, this.validateSecondPassword
            ])
        });
    }
    onSubmit() {
        if (this.signupForm.valid) {
            const { email, password, firstName, LastName } = this.signupForm.value;
            const user = new User(email, password, firstName, LastName);
            console.log(user);
        }
    }
    validateSecondPassword(control: AbstractControl): {[key: string]: any; }  {
        if (control.parent !== undefined) {
            const {password} = control.parent.value;
            if (control.value !== null && password === control.value) {
                return null;
            }
        }return {
            validatePassword: {
                passwordMatch: false,
                message: 'las contraseñas no coinciden'
            }
        };
    }
}

y el HTML

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
        <mat-input-container>
            <input matInput
                type="text" 
                placeholder="Fisrt Name"
                formControlName="firstName"
                id="firstName">
        </mat-input-container>
        <mat-input-container>
            <input matInput
                type="text" 
                placeholder="Last Name"
                formControlName="lastName"
                id="lastName">
        </mat-input-container>
        <mat-input-container>
            <input matInput 
                placeholder="Correo Electronico"
                formControlName="email"
                id="email">
        </mat-input-container>
        <mat-input-container>
            <input matInput
                type="password" 
                placeholder="Contraseña"
                formControlName="password"
                id="password">
        </mat-input-container>
        <mat-input-container>
            <input matInput
                type="password" 
                placeholder="Confirmar contraseña"
                formControlName="passwordConfirmation"
                id="passwordConfirmation">
        </mat-input-container>
        <button 
            type="submit"
            mat-raised-button
            color="accent">
            Registrar Usuario
        </button>
    </form>

Edgar Muñoz

student•

Para crear el signup, se siguió el mismo proceso que para el signin, solo que se agregaron nuevos campos en el template para las propiedades firstName y lastName, de igual forma, en el controlador, se agregaron nuevos campos al instanciar la variable con el nuevo FormGroup, para darle nombre y validación de requeridos a los nuevos campos, se le quitó la característica de opcionalidad a los campos mencionados en el modelo User. Al instanciar el nuevo usuario, se agregan estas propiedades antes mencionadas. Cabe anotar que como se cambió la opcionalidad a firstName y lastName, en el componente signin, se agragaron valores nulos al instanciar el User

habib borge

student•

Cree dos carpetas, para separar el signup del signin, y deje el modelo del usuario en la raiz de auth, en el selector del signup, añadí dos nuevos inputs para recibir el nombre y el apellido del usuario, de esta forma, en el onInit, añadí las nuevas reglas para estos dos campos y luego en el metodo onsubmit, añadí las dos nuevas variables, y en el modelo del usuario agregé el nombre y apellido.

Elizabeth Rosmery Ponce Pumacajia

student•

Generé los archivos necesarios para crear el formulario, validación de campos y finalmente muestra el nombre del usuario creado.

Luis Rodolfo Lara Espinoza

student•

Luis Felipe Evilla Rodríguez

student•

mi solucion al reto

Carlos Enrique Ramírez Flores

student•

aqui mi aporte

Carlos Enrique Ramírez Flores

student•

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  ngOnInit() {
    this.registerForm = new FormGroup({
      firstName: new FormControl(null,[Validators.required]),
      lastName: new FormControl(null,[Validators.required]),
      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),
      verifyPassword: new FormControl(null,Validators.required)
    });
  }

  onSubmit(){
    if(this.registerForm.valid){
      const {firstName, lastName, email, password,verifyPassword} = this.registerForm.value;
      const newUser = new User(firstName,lastName,email,password);
      console.log(newUser);
    }
  }
}```

Carlos Enrique Ramírez Flores

student•

<div class="mat-container">
    <form novalidate [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
      <mat-form-field>
        <input matInput placeholder="First Name" formControlName="firstName">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Last Name" formControlName="lastName">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Email" formControlName="email">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Password" formControlName="password" [type]="hide ? 'password' : 'text'">
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Varify Password" formControlName="verifyPassword" [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"><i class="material-icons">save</i> Registrar</button>
      <button type="button" mat-raised-button color="accent"><i class="material-icons">arrow_back</i> Regresar</button>
    </form>
  </div>

Andres Alvarez

student•

<div class="mat-container">
  <form novalidate [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input matInput placeholder="Nombre" formControlName="firstName" >
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Apellido" formControlName="lastName" >
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Correo electronico" formControlName="email" >
    </mat-form-field>
    <div class="passwords " [ngClass]="{'dont-check':passwordNotCheck}">

     <p *ngIf="passwordNotCheck">Las contraseñas no coinciden</p>

      <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>
      <mat-form-field>
        <input matInput placeholder="Confirma contraseña" formControlName="passwordCheck"  [type]="hide ? 'password' : 'text'">
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off' }}</mat-icon>
      </mat-form-field>

    </div>
    <button type="submit" mat-raised-button color="accent">Registrarse</button>
  </form>
</div>

export class SignupComponent implements OnInit {

  hide = true;
  passwordNotCheck = true;
  signUpForm:FormGroup;

  constructor() { }

  ngOnInit() {
    this.signUpForm = new FormGroup({
      firstName: new FormControl(null,[Validators.required]),
      lastName: new FormControl(null,[Validators.required]),
      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]),
      passwordCheck: new FormControl(null, Validators.required)
    })
  }

  onSubmit(){
    //
    if(this.signUpForm.valid && this.signUpForm.value.password == this.signUpForm.value.passwordCheck ){
      const{firstName,lastName,email,password} = this.signUpForm.value;
      const user = new User(email,password,firstName,lastName)
      this.passwordNotCheck = false;
    }
    if(this.signUpForm.valid && this.signUpForm.value.password != this.signUpForm.value.passwordCheck){
      this.passwordNotCheck = true;
    }
  }

}

Carlos Enrique Ramírez Flores

student•

super bien!

Walter Lensinas

student•

Buenas, paso el código de la clase con la pantalla de registro, simple, sin la doble confirmación de password.

Martes - 22/01/2019

Herdic Asmeth Diaz Munevar

student•

html

TypeScript

Interfaz

Herdic Asmeth Diaz Munevar

student•

Interfaz

html

Luis Abdel Rangel Castro

student•

Usuario anónimo

user•

JUAN CARLOS RUIZ SALAZAR

company_admin•

Para este desafio se copiaron las mismas signin como signup y se realizo los respectivos cambios para que funcionara sin problemas.

Relativamente es sencillo, lo que hay que tener en cuenta es si ya se tiene algo ya construido se debe tener en cuentra los cambios alli por ejemplo en el user.model.ts todos los llamados a este modelo se debe tener en cuenta para las nuevas formas que se realicen.

signup-screen.component.ts

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

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

export class SignupScreenComponent implements OnInit {

  signupForm: FormGroup ;

  ngOnInit() {
    this.signupForm = new FormGroup({
      firstName : new FormControl (null, Validators.required),
      lastName : new FormControl (null, Validators.required),
      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),
      repeat_password : new FormControl (null, Validators.required)
    });
  }

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

}

signup-screen.component.html

<form [formGroup]="signupForm" (submit)="onSubmit()"> <mat-form-field> <mat-label> Nombre </mat-label> <input matInput placeholder="Nombre" formControlName="firstName" required> </mat-form-field> <mat-form-field> <mat-label> Apellido </mat-label> <input matInput placeholder="Apellidos" formControlName="lastName" required> </mat-form-field> <mat-form-field> <mat-label> Correo Electronico </mat-label> <input matInput placeholder="Correo Electronico" formControlName="email" required> </mat-form-field> <mat-form-field> <mat-label> Contraseña </mat-label> <input matInput placeholder="Contraseña" formControlName="password" type="password"> </mat-form-field> <mat-form-field> <mat-label> Repetir Contraseña </mat-label> <input matInput placeholder="Repetir Contraseña" formControlName="repeat_password" type="password"> </mat-form-field> <button type="submit" mat-raised-button color="accent" >Registrarse</button> </form>

Irving Sarmiento

student•

Mi resultado:

signup.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
  <mat-form-field>
    <input matInput placeholder="Nombres" formControlName="firstName" id="firstName">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Apellidos" formControlName="lastName" id="lastName">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Correo electrónico" formControlName="email" id="email">
  </mat-form-field>
  <mat-form-field>
    <input type="password" matInput placeholder="Contraseña" formControlName="password" id="password">
  </mat-form-field>
  <button type="submit" mat-raised-button color="accent">Registrarse</button>
  <p>
    ¿Ya tienes cuenta? Inicia sesión <a routerLink="/signin">aquí</a>.
  </p>
</form>

signup.component.ts

export class SignupComponent implements OnInit {

  signupForm: FormGroup;

  constructor() { }

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

  onSubmit () {
    if (this.signupForm.valid) {
      console.log(this.signupForm.value);
    }
  }

}```

Adrian Camilo Caminos

student•

Carlos Enrique Ramírez Flores

student•

excelente, se ve chingon!

Dando estilo al 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