I’m trying to use the Calendar directive with angular form.
<input type="text" id="departureDate" formControlName="departureDate" placeholder="Tue, 05 Nov 2019"[mbsc-options]="calendarSetting" mbsc-calendar/>
calendarSetting = {
dateFormat: ‘D, d M yy’,
display: ‘center’,
weekDays: ‘short’,
buttons: [‘set’, ‘cancel’],
theme: ‘WN’,
showOnFocus: true,
};
However the date-picker opens on desktop, only when clicked on the input element. Its not opening when tabbed through the form. Even on clicking the space button, on the input field, component is not opening. How to make component open when focused on input field.
Works perfectly with ngmodel. How to make it work with FormControlName ?
Can you share a few more details on the usage? So far I could not reproduce this. Is this an angular or ionic project you are working on? (please provide versions too)
Also everytime i click on the input box, I get this warning message in chrome browser’s console.
the way i’m using thies calendar component is as directive. Not as <mbsc-calendar> component. Unfortunately, i’m not able to remove the formcontrolname for the input element. Here some more details of formgroup i’m using. If that explains.
contactUsForm = new TypedFormGroup({
departureDate: new TypedFormControl<string>(''),
})
These warnings appear because this type of event listener can potentially cause performance issues - but this doesn’t mean that they are. In our case we cannot use passive event listeners, because we’re conditionally prevent page scroll, and this cannot be done with passive event listeners.
I also can’t see anything wrong with the TypedFormGroup class from the example you shared. Can you elaborate a bit on what you mean, when you say, you can’t remove the formControlName from the input?
Since I can’t reproduce the issue, could you send me a simple example where this can be reproduced?
This issue has been resolved. Was facing the issue as there were 2 input fields with same Id and formcontrolName, as part of my app’s functionality. Changing the id and formcontrolname to be unique helped to fix the problem.