1

Soy nueva en angular e hice un formulario sencillo, como se validan los campos que no estén vacíos? o que sea solo números o solo letras?

Tengo el siguiente código en mi html

<nav class="navbar navbar-expand-md" style="background-color: rgba(28, 83, 236, 0.822);">
  <div class="container-fluid">
    <img class="brand" src="/assets/ejemplo.png">
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <a class="navbar-brand" style="color: floralwhite;">Consulta Datos</a>
    </div>
  </div>
</nav>
<div class="formularioRegistro">
  <h2>Iniciar Sesión</h2>
  <form [formGroup]="loginForm!" (ngSubmit)="guardar">
    <div class="form-group">
      <label>Usuario:</label>
      <input type="text" formControlName="usuario" class="form-control" required>
      <label>Contraseña:</label>
      <input type="text" formControlName="contraseña" class="form-control">
    </div>

    <button type="submit" class="btn btn-primary btn-sm float-right"> Acceder</button>
  </form>
</div>

<router-outlet></router-outlet>

y en mi component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';



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


export class AppComponent implements OnInit {

  
  loginForm!: FormGroup;
  constructor(
    public fb: FormBuilder,
  ) {
    
  }

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      usuario: ['', Validators.required],
      contraseña: ['', Validators.required],
    })
  }

  guardar(): void {

  }
}

Alguien sabe como mostrar en la pantalla cuando un campo lo quieren mandar vacío? o como se manda un mensaje que no es valido lo que están ingresando

3 respuestas 3

2

Puedes acceder al FormControl y usar el método valid

this.loginForm.get('usuario').valid(), eso retorna false si está invalido this.loginForm.get('usuario').invalid(), eso retorna true si está invalido

con this.loginForm.valid(), validas todo el formulario

puedes usar:

guardar(): void {
  if( this.loginForm.valid() ){
    alert('formualario válido')
  }else{
    alert('formualario inválido')
  }
}

Puedes desactivar el boton submit añadiendo la directiva:

<button ... [disabled]="loginForm.invalid()"> ...

1

Puedes disparar las validaciones desde tu función de la siguiente manera:


guardar(): void {
    this.loginForm.markAllAsTouched();
    this.loginForm.updateValueAndValidity();

 if( this.loginForm.valid() ){
    alert('formualario válido')
  }else{
    alert('formualario inválido')
  }
}

Después edita tus campos para que muestren un error si hay un error:

<label>Usuario:</label>
<input type="text" formControlName="usuario" [ngClass]="{
                    'is-invalid':f('usuario')?.invalid,
                    'is-valid': f('usuario')?.valid
                  }" class="form-control">

Donde f() es:

f(campo:string){
  return this.loginForm.get("campo")
}

Nota que agregue ? en el html.

Validaciones con touched.

  invalid(campo: AbstractControl | null ): boolean {
    return campo?.touched && campo?.invalid;
  }

  valid(campo: AbstractControl | null): boolean {
    return campo?.touched && campo?.valid;
  }

Remplaza en el html:

'is-invalid':invalid(f('usuario')),
                    'is-valid': valid(f('usuario'))

Para mostrar un texto necesitas saber el tipo de error. Puedes hacer esto.

<small *ngIf="f('usuario')?.getError('required')"  > Este campo es necesario </small>
10
  • al dar clic en el botón no hace nada, debo de modificar algo al boton?
    – Root93
    Commented el 8 feb. 2021 a las 23:56
  • Edite la pregunta. Revisala. Tienes que agregar algunas clases para que el error se note. Yo pongo de ejemplo unas de bootstrap, pero puedes remplazarlas por las que quieras. Colorean de rojo o verde , respectivamente ,el input.
    – Legna
    Commented el 8 feb. 2021 a las 23:59
  • me manda el error en el input en el .valid, dice Object is possibly 'null', el metodo de abajo, va en el component.ts ??
    – Root93
    Commented el 9 feb. 2021 a las 0:07
  • Si, agrega una validacion. Comprueba que no sea null para que quite ese error. Edito la pregunta.
    – Legna
    Commented el 9 feb. 2021 a las 0:13
  • gracias , ya se ilumina en rojo o en verde, pero si quiero mostrar un mensaje abajo del input? y por default cuando entro a la pagina esta en rojo por que no hay nada, pero quiero que eso se marque cuando das clic sin llenar
    – Root93
    Commented el 9 feb. 2021 a las 0:33
0

validarlo directamente en el back y retorna el mensaje de error en el front introducir la descripción de la imagen aquí

1
  • El código va como texto por favor, solo utiliza imágenes cuando sea absolutamente necesario. ;)
    – Israel-ICM
    Commented el 24 may. 2023 a las 19:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.