Dando estilo al formulario de signin

Clase 18 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Tomar examen

Comentarios

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!

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>

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'
            }
        };
    }
}

<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>

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);
    }
  }
}```

<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>

<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;
    }
  }

}

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);
    }
  }

}

<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>

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);
    }
  }

}```

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