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:
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>