1

Tengo un campo llamado HORA, el cual se muestra en la siguiente tabla, lo que quiero saber es como agregar una validación para que solo se pueda ingresar números y los caracteres (:), así como se muestra actualmente y que cuando borres los datos del input el borde se ponga en color rojo al estar vacío

introducir la descripción de la imagen aquí

html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="idControl">
    <th mat-header-cell *matHeaderCellDef>ID.</th>
    <td mat-cell *matCellDef="let element">{{ element.idControl }}</td>
  </ng-container>

  <ng-container matColumnDef="cveEstado">
    <th mat-header-cell *matHeaderCellDef>ESTADO</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field appearance="outline">
        <mat-select
          [(value)]="element.cveEstado"
          (selectionChange)="cambiarEstado($event.value, element)" [disabled]="!element.editar"
        >
          <mat-option
            *ngFor="let estatus of estadoModel"
            [value]="estatus.cveEstado"
            [ngClass]="{
              'text-red': estatus.cveEstado == 'ERR',
              'text-blue': estatus.cveEstado == 'INP'
            }"
          >
            {{ estatus.descripcion }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="comentario">
    <th mat-header-cell *matHeaderCellDef>COMENTARIO</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field>
        <input
          matInput
          [value]="element.comentario"
          (keyup)="changeValue($event.target, element)" [disabled]="!element.editar"
        />
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="horaInicio">
    <th mat-header-cell *matHeaderCellDef>HORA</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field>
        <input
          matInput
          [value]="element.horaInicio"
          (keyup)="changeValueHora($event.target, element)" [disabled]="!element.editar"
        />
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="fechaRegistro">
    <th mat-header-cell *matHeaderCellDef>FECHAREGISTRO</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field appearance="fill" *ngIf="element.fechaRegistro">
        <input
          matInput
          [matDatepicker]="picker"
          [value]="element.fechaRegistro"
          (dateChange)="onDateChange($event.value, element)" [disabled]="!element.editar"
        />
        <mat-datepicker-toggle
          matIconSuffix
          [for]="picker"
        ></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="botonSave">
    <th mat-header-cell *matHeaderCellDef>GUARDAR</th>
    <td mat-cell *matCellDef="let element; let i = index">
      <button mat-button (click)="guardar(element)">Guardar</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

component

import { Component } from '@angular/core';
import { Control } from './Control';
import { ControlService } from './control.service';
import { MatTableDataSource } from '@angular/material/table';
import { Estado } from './Estado.ts';
import { DateAdapter } from '@angular/material/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'prueba-angular-material';
  displayedColumns: string[] = [
    'idControl',
    'cveEstado',
    'comentario',
    'horaInicio',
    'fechaRegistro',
    'botonSave',
  ];
  estadoModel: Estado[] = [];
  control: Control[] = [];
  controlModel: Control = new Control();
  estadoSeleccionado: any;
  idSeleccionado: string = '';
  comentIngresado: string = '';
  horaIngresada: string ='';
  fechaIngresada: any;
  dataModel: any[] = [];

  constructor(
    private controlService: ControlService,
    private dataAdapter: DateAdapter<Date>
  ) {
    this.dataAdapter.setLocale('es-MX');
  }

  ngOnInit(): void {
    this.obtenerLista();
    this.obtenerListaEstados();
  }

  //obtiene la lista del servicio
  dataSource: any;
  private obtenerLista() {
    this.controlService.obtenerLista().subscribe((response) => {
      this.control = response.data;
      this.dataSource = new MatTableDataSource(this.control);
    });
  }

  //obtiene la lista de estados para el select
  private obtenerListaEstados() {
    this.controlService.obtenerEstados().subscribe((response) => {
      this.estadoModel = response.data;
    });
  }

  //obtiene la cve del estado que se selecciona y su id
  cambiarEstado(valor: Event, row: any) {
    this.estadoSeleccionado = valor;
    this.idSeleccionado = row.idControl;

    console.log(' ID SELECC ' + this.idSeleccionado);
    console.log(' ESTADO SELECC ' + this.estadoSeleccionado);
  }

  //obtiene el valor ingresado en el input coment  y el id
  changeValue(e: any, row: any) {
    this.comentIngresado = e.value;
    console.log(' INPUT COMENT  ' + this.comentIngresado);
  }

 //obtiene el valor ingresado en el input hora, y el id
 changeValueHora(e: any, row: any) {
  this.horaIngresada = e.value;
  console.log(' INPUT HORA   ' +this.horaIngresada);
}


  //OBTIENE EL VALOR DE LA FECHA SELECCIONADA
  onDateChange(valor: Event, row: any) {
    this.fechaIngresada = valor;
    console.log('FECHA SELECC  ' + this.fechaIngresada);
  }

  //funcion para darle formato a la fecha internamente
  formatDateToString(date: Date): string {
    if (date) {
      const format = 'yyyy-MM-dd';
      const locale = 'en-US';
      return formatDate(date, format, locale);
    }
    return '';
  }

  guardar(element: any) {
    if (element.editar) {
      console.log(`Desactivado para ${element.idControl}`);
      element.editar = false;

      if (this.comentIngresado == '') {
        alert('No se han modificado campos');
      } else {
        console.log(' ENTRA ELSE  ');
        this.controlModel.cveEstado = this.estadoSeleccionado;
        this.controlModel.comentario = this.comentIngresado;
        this.controlModel.idControl = this.idSeleccionado;
        this.controlModel.fechaRegistro = this.formatDateToString(
          this.fechaIngresada
        );

        console.log('prueba fecha final  ' + this.controlModel.fechaRegistro);
        this.controlService
          .updateCampo(this.controlModel)
          .subscribe((data) => {
            this.controlModel = data;
            this.comentIngresado = '';
            this.estadoSeleccionado = '';
            this.fechaIngresada = '';

            alert('Agregado correctamente');
          });
      }
    } else {
      console.log(`Activado para ${element.idControl}`);
      element.editar = true;
    }
  }
}

2 respuestas 2

0

A tu función changeValueHora() (que lo ejecutas con keyup()), puedes llamar a otra función, llamado validarHora():

changeValueHora(e: any, row: any) {
  this.horaIngresada = e.value;
  console.log(' INPUT HORA   ' + this.horaIngresada);
  this.validarHora();
}

Y esa función se encarga de validar que si el valor del input (que es this.horaIngresada) está en el formato 00:00, cualquier número y que lleve los dos puntos. Dependiendo a esto, cambiamos el estado de horaInvalida (si es true o false):

validarHora() {
  const regex = new RegExp("^[0-9]{1,2}:[0-9]{1,2}$");
  this.horaInvalida = !regex.test(this.horaIngresada);
}

Y horaInvalida lo inicializamos como variable global y booleano:

horaInvalida = true;

validarHora() {
  // ...
}

Y para que se pinte dependiendo al booleano, lo podemos hacer con ngClass, quedando tu input de esta forma:

<input matInput [value]="element.horaInicio" (keyup)="changeValueHora($event.target, element)" [disabled]="!element.editar" [ngClass]="{'error': !horaInvalida}" required />

Y agregas esta clase CSS para poder pintar el input:

.error {
  color: red !important;
}
1
  • Hola, lo implementé pero aun así me deja ingresar letras, y para que el borde del input se ponga en rojo cuando detecte que esta vacío? entiendo que solo se pinta de rojo cuando se valida el regrex, pero cuando este vacio
    – Root93
    Commented el 3 may. 2023 a las 22:37
0

Agrega type="time" al input para que siempre sean horas y usa focusout para cuando salga del input te marque el error.

<input matInput type="time" (focusout)="cambiarHora($event.target)" [value]="row.hora"/>

Para validar si esta vacío bastaría con agregar un return si e.value no existe. if(!e.value) return;, en el ejemplo uso un throw new Error para mostrarlo mejor en consola.

  cambiarHora(e: any) {
    if (!e.value) throw new Error('Hora invalida');
    this.hora = e.value;
    console.log(`Hora: ${this.hora}`);
  }

Para el estilo puedes hacerlo como te dijeron en otras respuestas PERO esta no es la mejor forma, y cuando vayas a validar otros eventos y por la forma en la que esta diseñado, vas a tener que checar cada elemento de una fila para activar / desactivar el botón guardar si es que se cumplen / no se cumplen las condiciones. Sería mucho mejor usar formularios reactivos (Reactive Forms) para facilitar las validaciones y reducir la lógica que tienes en el HTML.

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.