A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Crear un formulario

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.

Aportes 22

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Angular siempre me pareció difícil, pero Nicolás lo explica de una manera digerible que se entiende todo super sencillo.

Wow, terminando este modulo, me doy cuenta que Angular tiene super poderes, nos facilita mucho en cuanto a validaciones de entrada de texto, bloqueos de elementos en el dom, y todo esto con puros metodos/propiedades ya insertadas en Angular.

Hasta ahora genial el curso. Me agrada mucho como explica Nico.

Me demor√© 30 minutos para compartir mi aporte ūüėÖ

<h1 class="form-title">Formulario</h1>
<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;
  }
}

![](

Si queremos validar los campos del formulario una vez se han enviado o se ha interactuado con ellos podemos hacer lo siguiente:

Primero agregamos una template variable a nuestro formulario

<form class="form" #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm)">
</form>

Como se ha visto en clases agregamos una almohadilla o numeral y le asignamos un nombre luego le indicamos que ser√° un ngForm.
Una vez tenemos esto podemos validar los campos del formulario de la siguiente manera:

  <div class="form-control">
    <input
      placeholder="Email"
      type="email"
      name="email"
      required
      [(ngModel)]="register.email"
    />
    <span
      class="helper-text"
      [class.visible]="
        (registerForm.submitted || registerForm.controls['email']?.touched) &&
        registerForm.controls['email'].invalid
      "
    >
      Error el campo email es requerido
    </span>
  </div>

Lo que hacemos aquí es agregar una clase visible al span que contiene la clase helper-text basado en la condición de que el usuario ha enviado el formulario o ya interactuó con el y además el campo es invalido.
Si quieren saber mas del funcionamiento de NgForm les recomiendo la documentación también les dejo la documentación de los controles del formulario.

El formulario completo quedaría de la siguiente forma:

<form class="form" #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm)">
  <div class="form-control">
    <input
      placeholder="Email"
      type="email"
      name="email"
      required
      [(ngModel)]="register.email"
    />
    <span
      class="helper-text"
      [class.visible]="
        (registerForm.submitted || registerForm.controls['email']?.touched) &&
        registerForm.controls['email'].invalid
      "
    >
      Error el campo email es requerido
    </span>
  </div>
  <div class="form-control">
    <input
      placeholder="Password"
      type="password"
      name="password"
      required
      [(ngModel)]="register.password"
    />
    <span
      class="helper-text"
      [class.visible]="
        (registerForm.submitted ||
          registerForm.controls['password']?.touched) &&
        registerForm.controls['password'].invalid
      "
    >
      Error el campo password es requerido
    </span>
  </div>
  <button type="submit">Register</button>
</form>


*

*
En StackBlitz no queda igual pero comparto el link
https://angular-9-material-starter-9imqxb.stackblitz.io

Formulario de registro

Formulario de Login

Excelente curso ūüėÉ.

Me ha gustado mucho Angular, siento que rinde mucho m√°s el tiempo de desarrollo frente a React.


Y aquí el código:
HTML

<div class="form-container">
  <h1>My Account</h1>
  <form (ngSubmit)="onRegister()" #myForm="ngForm">
    <div class="input-group">
      <label for="name">Name</label>
      <input
        type="text"
        id="name"
        required
        [(ngModel)]="register.name"
        name="name"
      />
      <p
        class="form-error-msg"
        [ngClass]="{
          valid: register.name !== '',
          invalid: register.name === ''
        }"
      >
        Invalid or no data entered
      </p>
      <label for="email">Email</label>
      <input
        type="email"
        id="email"
        required
        [(ngModel)]="register.email"
        name="email"
      />
      <p
        class="form-error-msg"
        [ngClass]="{
          valid: register.email !== '',
          invalid: register.email === ''
        }"
      >
        Invalid or no data entered
      </p>
      <label for="password">Password</label>
      <input
        type="password"
        id="password"
        required
        [(ngModel)]="register.password"
        name="password"
      />
      <p
        class="form-error-msg"
        [ngClass]="{
          valid: register.password !== '',
          invalid: register.password === ''
        }"
      >
        Invalid or no data entered
      </p>
    </div>
    <button
      type="submit"
      [disabled]="myForm.invalid"
      [class.invalid]="myForm.invalid"
    >
      Register
    </button>
  </form>
</div>

CSS

.form-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: grid;
  place-content: center;
  font-family: "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  & h1 {
    margin-bottom: 40px;
    font-size: 16px;
  }
}

form {
  width: 300px;
}
.input-group {
  display: flex;
  flex-direction: column;
  & label {
    margin-bottom: 4px;
    font-weight: 600;
  }
  & input {
    border: none;
    outline: none;
    height: 24px;
    border-radius: 10px;
    padding: 4px 8px;
    background-color: whitesmoke;
    caret-color: green;
    color: rgb(98, 97, 97);
  }
}
button[type="submit"] {
  background-color: rgb(75, 161, 108);
  padding: 16px 24px;
  width: 100%;
  border-radius: 10px;
  color: white;
  font-weight: 700;
  border: none;
  outline: none;
  cursor: pointer;
  &.invalid {
    background-color: rgb(170, 208, 185);
  }
}

.form-error-msg {
  font-size: 12px;
  color: red;
  &.valid {
    opacity: 0;
  }
  &.invalid {
    opacity: 1;
  }
}

Etiqueta <button> dentro de los formularios

Por regla, la √ļltima etiqueta <button> dentro de una etiqueta <form> ser√° del tipo submit, asi que en si se pone al final un <button> y no se especifica el tipo entonces el browser lo entender√° del tipo submit, aunque ya tengamos previamente otro <button> del tipo submit.

Muy buen dominio del tema, muchas gracias @NicolasMolina

Este fue mi reto

Deberían de dar clases de como solucionar problemas al actualizar sistemas y sobre problemas al ejecutar programas.

Les comparto mi formulario
https://angular-ivy-w9gqgv.stackblitz.io

Excelente curso Nicolas ūü§Ė
‚≠źÔłŹ‚≠źÔłŹ‚≠źÔłŹ‚≠źÔłŹ‚≠źÔłŹ