I have a date and time picker set up like this sample. I now want to make these required as well as disable the submit button when they are not filled in (I know how to do this). Default the fields will be blank. I tried with adding the "required" property onto the input field but that keeps marking the field as invalid. Is it possible to achieve this another way and if so how?
Hello Nina,
We recommend you use ngModel, instead of value, to bind the date and time picker templates' inputs. ngModel does not just give you two-way data binding, but also tells you if the user touched the control, if the value changed, or if the value became invalid. The code should be similar to the following:
<input igxInput name="dateInput" [(ngModel)]="displayData" required /> <input igxInput name="timeInput" [(ngModel)]="displayTime" required/>
Please, review this approach and let us know if you need further assistance on this matter.
https://stackblitz.com/edit/angular-o4xsa9
I tried your suggestion, but that didn't work, since displayData is passed down from the igxDatePickerTemplate, but we need to bind to the date property in the ts file. So I experimented a bit more and came to the above linked stackblitz demo. The only problem remaining is that the first time picking a date, the field remains marked as invalid. This leads me to believe either I am still doing something wrong, or this could be a bug. Can you have a look and help me?