Crear un formulario

Contenido del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

20
Despliegue con Firebase Hosting
09:48 min

Despedida

21
Continúa con el Curso de Angular: Componentes y Servicios
00:57 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:21

Crear un formulario

Curso de Fundamentos de Angular

Clase 19 de 21

Clase 19 / 21

Recursos

Conociendo la directiva [(ngModel)] que nos facilita el intercambio de datos de forma bidireccional entre la vista y el componente, puedes crear tu primer formulario apoyándote de esta directiva y de otras características propias de Angular para el manejo y validación de formularios.

Paso 1

Crea un simple formulario de Login en el HTML y las variables en el componente para capturar los valores de los campos con ngModel:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  form = {
    email: '',
    password = ''
  };
}

<form>
    <div>
        <label></label>
        <input name="email" type="email" [(ngModel)]="form.email" required />
    </div>
    <div>
        <label></label>
        <input name="password" type="password" [(ngModel)]="form.password" required />
    </div>
    <div>
        <button type="submit">Iniciar sesión</button>
    </div>
</form>

Paso 2

Agregale al componente un método que responda al evento del envío del formulario llamado submitLogin(). Puedes enlazar este método al formulario con la directiva (ngSubmit) que va colocada en la etiqueta <form> junto con una variable de template para ponerle un nombre al formulario como por ejemplo #formLogin="ngForm". Tienes que igualar el nombre de tu variable a ngForm para que Angular reconozca que se trata de un formulario.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  form = {
    email: '',
    password = ''
  };
  submitLogin() {
    // Login del usuario
  }
}

<form (ngSubmit)="submitLogin()" #formLogin="ngForm">
    <div>
        <label></label>
        <input name="email" type="email" [(ngModel)]="form.email" required />
    </div>
    <div>
        <label></label>
        <input name="password" type="password" [(ngModel)]="form.password" required />
    </div>
    <div>
        <button type="submit">Iniciar sesión</button>
    </div>
</form>

Paso 3

Finalmente, gracias a esta conexión de tu formulario con el componente, se activará el método submitLogin() al hacer clic en el botón. Para validar tu formulario, utiliza la variable de template para imprimir un mensaje de error en pantalla o deshabilitar el botón de envío de la siguiente manera:

...
<div>
    <button [disabled]="formLogin.invalid" type="submit">Iniciar sesión</button>
</div>
...

Aporte creado por: Kevin Fiorentino.

Cesar Elías Armendariz Ruano

Hace 5 años

<h1 class="form-title">Formulario</h2>
<form class="form" (ngSubmit)="onRegister()" #myForm="ngForm">
  <div></div>
  <div class="input-group">
    <label class="form-label" for="Nombre">Nombre</label>
    <input class="form-input" type="text" name="name" required id="name" #nameInput="ngModel" [(ngModel)]="register.name" placeholder="Cesar">
    <p class="message--error" [class.invalid]="nameInput.invalid">Campo requerido</p>
  </div>
  <div></div>
  <div></div>
  <div class="input-group">
    <label class="form-label" for="Email">Email</label>
    <input class="form-input" type="email" name="email" required id="email" #emailInput="ngModel" [(ngModel)]="register.email">
    <p class="message--error" [class.invalid]="emailInput.invalid">Campo requerido</p>
  </div>
  <div></div>
  <div></div>
  <div class="input-group">
    <label class="form-label" for="password">Password</label>
    <input class="form-input" type="password" name="password" required id="password" #passwordInput="ngModel" [(ngModel)]="register.password">
    <p  class="message--error" [class.invalid]="passwordInput.invalid">Campo requerido</p>
  </div>
  <div></div>
  <div></div>
  <div class="form-buttons">
    <button class="buttonSubmit" [disabled]="myForm.invalid" type="submit">Registrar</button>
    <button class="buttonAction" type="button">Accion</button>
  </div>
</form>

.form-title {
  display: flex;
  justify-content: center;
  color: darkgreen;
  font-size: 2.4rem;
  font-family: cursive;
  padding-bottom: 2rem;
}

.form {
  display: grid;
  grid-template-columns: 40px minmax(345px, 530px) 40px;
  grid-template-rows: repeat(5, auto);
}

.input-group {
  display: grid;
  justify-items: stretch;
  padding-bottom: 30px;

  .form-label {
    font-family: cursive;
    padding-bottom: 5px;
  }

  .form-input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1.3px solid darkgreen;
    border-radius: 10px;
  }
}

.form-buttons {
  display: flex;
  margin: 10px;
  padding-bottom: 30px;
  justify-content: space-evenly;

  .buttonSubmit {
  font-size:15px;
  font-family:Arial;
  width:140px;
  height:50px;
  border-width:1px;
  color:#fff;
  border-color:#599bb3;
  font-weight:bold;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  box-shadow: 0px 10px 14px -7px #276873;
  text-shadow: 0px 1px 0px #3d768a;
  background:linear-gradient(#599bb3, #408c99);
  }

  .buttonSubmit:disabled {
    background: linear-gradient(27deg, rgba(0,0,0,1) 0%, rgba(195,190,183,1) 100%);
    background-color:transparent;
  }

  .buttonSubmit:hover {
    background: linear-gradient(#408c99, #599bb3);
  }

  .buttonAction {
    font-size:15px;
  font-family:Arial;
  width:140px;
  height:50px;
  border-width:1px;
  color:rgba(255, 255, 255, 1);
  border-color:#599bb3;
  font-weight:bold;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  box-shadow: 0px 10px 14px -7px #276873;
  text-shadow: 0px 1px 0px #3d768a;
  background:linear-gradient(rgba(121, 214, 217, 1), rgba(52, 198, 187, 1));
  }

  .buttonAction:hover {
    background: linear-gradient(rgba(52, 198, 187, 1), rgba(121, 214, 217, 1));
  }
}
.message--error {
  background-color: red;
  color: white;
  opacity: 0;
  transition: all linear .2s;
  &.invalid {
    opacity: 1;
  }
}

@media screen and (min-width: 400px) {
  .form {
    justify-content: center;
  }
}

José Joel Farroñan Saca

Hace 4 años

Agregale un patter a tu correo ^[\w-.]+@([\w-]+.)+[\w-]{2,4}$

Comentarios (77)77 comentarios

Eliseo Ávila

Juan Esteban Mazo Herrera

Erasmo Hernández

Profesor

Jimmy Buriticá Londoño

Alexandro Jiménez

Hace 3 años

Fernando Robles

Reinaldo Mendoza

Santiago Lopera Naranjo

Jhonatan Segura

Leonardo Claro

Marisol Cervantes

Fernando Molano Castrillón

Jhan Ronaldo Antezana Yana

José Mauricio Lemus Rodezno

Cesar Augusto Silva Ruiz

ELKIN YESID MORENO VELEZ

Jairo Humberto Rey Castro

Oscar Ramos

Lorena Urrea

Saul Mamani

Camilo Bernal

Gilberto Espinoza Maciel

Binder Germán Ariel

Alexander De Jesús Ventura Mejía

Huilén Solís

Eligreg López

Jesús Alberto Camargo Pérez

Sebastian Arrieta Villarreal

Primeros pasos

Qué es Angular: ventajas y cómo aprenderlo

Instalación de Angular CLI

Comandos de Angular para correr tu proyecto

Estructura de un proyecto en Angular

Conceptos básicos de TypeScript para usar Angular

Comunicación de datos

String interpolation

Property Binding

Introducción al Event Binding de Angular

Otros eventos que puedes escuchar

Data binding con ngModel

Estructuras de control

Uso de *ngIf

Uso de *ngFor

*ngFor para arrays

Uso de *ngSwitch

Angular Devtools

Estilos

Estilos a la lista de productos

Class and style

NgClass y NgStyle

Crear un formulario

Deploy

Despliegue con Firebase Hosting

Despedida

Continúa con el Curso de Angular: Componentes y Servicios

Crear un formulario

Progreso del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

Despedida

Recursos

Recursos