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