Dealing with an angular 7 reactive form, the input field in this form allows users to view and modify time. The issue arises when users enter nonsensical numbers in this field that do not align with valid time ranges (e.g., hours should be between 1-24, minutes between 1-60). My concern is how can I validate the user's input in the time field and only activate the Save button if it is valid?
Note: From my testing experience, even if users enter nonsensical time values, they are not saved in the database, possibly due to SQL rejecting such entries.
I have searched online but could not find a solution. Angular provides validators for email fields, but nothing specific for time validation within forms.
This is how I have defined my form:
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
And this is the corresponding HTML code:
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I am looking for a way to validate any user input that does not make sense in terms of time, so that the Save button remains inactive unless a valid time value is entered.
Your help and guidance would be greatly appreciated.