2

Recurro a este medio para pedirle ayuda con lo siguiente:

Estoy desarrollando una aplicación con Angular 8, básicamente esta aplicación consta de un formulario donde tengo algunos datos comunes como nombre fecha de inicio, fecha de finalización, etc.

El problema radica en que estoy tratando de aplicar una validación en la fecha de inicio y la fecha de finalización (las cuales puse con date pickers dentro de una columna de una mat table cada uno), esta validación consiste en que cuando un usuario intente poner una fecha de finalización menor a la fecha de inicio, aparezca una notificación para avisarle que eso no es posible.

He estado revisando algunos ejemplos pero no entiendo exactamente como aplicarlo del lado del TS (Type Script)

Espero puedan ayudarme.

La GUI luce asi:

introducir la descripción de la imagen aquí

My codigo es:

HTML

    <div style="overflow: auto; height: 150px;">
        <table formArrayName="planActividades" *ngFor="let actividad of planActividades.controls; let i=index" mat-table
            [dataSource]="dataSource" class="mat-elevation-z8 mat-tables">

            <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

            <!-- actividad Column -->
            <ng-container matColumnDef="actividad">
                <th mat-header-cell *matHeaderCellDef class="header-cell"> Actividad </th>
                <td [formGroupName]="i" mat-cell *matCellDef="let element">
                    <input formControlName="actividad" id="{{'actividad' + i}}" type="text" matInput
                        placeholder="Nombre de la actividad" (input)="letrasMayuscular($event)">
                </td>
            </ng-container>

            <!-- fechaInicio Column -->
            <ng-container matColumnDef="fechaInicio" formGroupName = "duracionActividad">
                <th mat-header-cell *matHeaderCellDef class="header-cell"> Fecha Inicio </th>
                <td [formGroupName]="i" mat-cell *matCellDef="let element">
                    <input formControlName="fechaInicioA" id="{{'fechaInicioA' + i}}" type="date" matInput placeholder="Fecha Inicio"
                        (input)="letrasMayuscular($event)" useValueAsDate>
                </td>
            </ng-container>

            <!-- fechaFin Column -->
            <ng-container matColumnDef="fechaFin" formGroupName = "duracionActividad">
                <th mat-header-cell *matHeaderCellDef class="header-cell"> Fecha Fin </th>
                <td [formGroupName]="i" mat-cell *matCellDef="let element">
                    <input formControlName="fechaFinA" id="{{'fechaFinA' + i}}" type="date" matInput placeholder="Fecha Fin" useValueAsDate>

                </td>
            </ng-container>


            <!-- comentarios Column -->
            <ng-container matColumnDef="comentarios">
                <th mat-header-cell *matHeaderCellDef class="header-cell">Comentarios</th>
                <td [formGroupName]="i" mat-cell *matCellDef="let element">
                    <input formControlName="comentarios" id="{{'comentarios' + i}}" type="text" matInput
                        placeholder="Comentarios">
                </td>
            </ng-container>
            <!-- acciones Column -->
            <ng-container matColumnDef="select">
                <th mat-header-cell *matHeaderCellDef class="header-cell">Acciones</th> 
                <td [formGroupName]="i" mat-cell *matCellDef="let element">
                    <button mat-icon-button matTooltip="Eliminar actividad" matTooltipPosition="right"
                    *ngIf="((planActividades.length)-1)"> 
                    <mat-icon class="icon-red-color" svgIcon="remove-circle" (click)="deleteActividad(i)"></mat-icon>
                </button>
                </td>
              </ng-container>

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


    </div>       

1 respuesta 1

0

puedes comparar fechas mediante "<,>. !==, ==="

    public  fechauno = new Date();
    public fechados = new Date();
    if (fechauno.getTime() > fechados.getTime()){
    return true;
    } else {
     return false
    }

Para poder detectar cambios en tu formBuilder podrias hacer algo asi:

  export class AppComponent implements OnInit {

  testForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.formBuilder.group({
      firstDate: '',
      lastDate: ''
    });

    this.onValueChanges();
  }

  onValueChanges(): void {
    this.testForm.valueChanges.subscribe(val=>{
      console.log(val);
    })
  }
}

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.